feat(patterns): add new pattern suite and improve mobile controls

Add a broad set of LED patterns with metadata/tests and update zone/profile preset seeding, while refining mobile/desktop UI behavior for scrolling, brightness controls, and bulk pattern sending.

src/static/style.css

@@ -149,6 +149,40 @@ header h1 {
     background-color: #333;
 }
 
+.menu-brightness-control {
+    padding: 0.45rem 0.75rem 0.55rem;
+    border-bottom: 1px solid #333;
+}
+
+.menu-brightness-control label {
+    display: block;
+    font-size: 0.78rem;
+    color: #bdbdbd;
+    margin-bottom: 0.3rem;
+}
+
+.menu-brightness-control input[type="range"] {
+    width: 100%;
+}
+
+.header-brightness-control {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 13rem;
+    padding: 0.2rem 0.1rem;
+}
+
+.header-brightness-control label {
+    font-size: 0.8rem;
+    color: #bdbdbd;
+    white-space: nowrap;
+}
+
+.header-brightness-control input[type="range"] {
+    width: 8.5rem;
+}
+
 /* Header/menu actions that should only appear in Edit mode */
 body.preset-ui-run .edit-mode-only {
     display: none !important;
@@ -248,7 +282,8 @@ body.preset-ui-run .edit-mode-only {
     display: block;
     overflow-y: auto;
     overflow-x: hidden;
-    padding: 0.5rem 1rem 1rem;
+    padding: 0.5rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px) + 3.5rem);
+    -webkit-overflow-scrolling: touch;
 }
 
 .presets-toolbar {
@@ -528,6 +563,12 @@ body.preset-ui-run .edit-mode-only {
     row-gap: 0.3rem;
     align-content: start;
     width: 100%;
+    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5.5rem);
+    scroll-padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5.5rem);
+}
+
+#presets-list-zone > :last-child {
+    margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 2.5rem);
 }
 
 /* Settings modal layout */
@@ -949,7 +990,7 @@ body.preset-ui-run .edit-mode-only {
 }
 
 /* Mobile-friendly layout */
-@media (max-width: 800px) {
+@media (max-width: 1000px) {
     header {
         flex-direction: row;
         align-items: center;
@@ -1001,6 +1042,9 @@ body.preset-ui-run .edit-mode-only {
         min-width: 280px;
         max-width: 95vw;
         padding: 1.25rem;
+        max-height: calc(100dvh - 1rem);
+        overflow-y: auto;
+        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
     }
 
     .form-row {
@@ -1018,6 +1062,10 @@ body.preset-ui-run .edit-mode-only {
     width: 100%;
     height: 100%;
     background-color: rgba(0,0,0,0.7);
+    overflow-y: auto;
+    padding: 1rem;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
 }
 .modal.active {
     display: flex;
@@ -1030,6 +1078,20 @@ body.preset-ui-run .edit-mode-only {
     border-radius: 8px;
     min-width: 400px;
     max-width: 600px;
+    max-height: calc(100dvh - 2rem);
+    overflow-y: auto;
+    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
+    -webkit-overflow-scrolling: touch;
+}
+
+/* Real-phone viewport fallback for browsers with unstable 100dvh behavior. */
+@supports (-webkit-touch-callout: none) {
+    .modal {
+        min-height: -webkit-fill-available;
+    }
+    .modal-content {
+        max-height: calc(-webkit-fill-available - 2rem);
+    }
 }
 .modal-content label {
     display: block;
@@ -1200,9 +1262,11 @@ body.preset-ui-run .edit-mode-only {
     min-height: 80px;
 }
 /* Presets list: 3 columns and vertical scroll (defined above); mobile same */
-@media (max-width: 800px) {
+@media (max-width: 1000px) {
     #presets-list-zone {
         grid-template-columns: repeat(3, minmax(0, 1fr));
+        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 7rem);
+        scroll-padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 7rem);
     }
 }
 /* Help modal readability */