.

frontend/src/app/components/modal/block-edit.component.ts

@@ -177,6 +177,11 @@ interface EditedValue {
       overflow-x: auto;
       overflow-y: hidden;
       scroll-behavior: smooth;
+      scroll-snap-type: x mandatory;
+
+      @media (max-width: $mobile-width) {
+        padding: 0 7.5vw;
+      }
 
       &::-webkit-scrollbar {
         width: 0;
@@ -192,8 +197,12 @@ interface EditedValue {
       flex: 0 0 auto;
       width: 66vw;
       max-width: 400px;
+      scroll-snap-align: center;
       @media (max-width: $mobile-width) {
-        width: 300px;
+        width: 85vw;
+        max-width: 85vw;
+        padding: var(--medium-padding);
+        margin: calc(var(--medium-padding) / 2);
         opacity: 1 !important;
       }
       box-sizing: border-box;
@@ -246,6 +255,10 @@ interface EditedValue {
         opacity: 0 !important;
         width: 60vw;
         max-width: 60vw;
+        @media (max-width: $mobile-width) {
+          width: 7.5vw;
+          max-width: 7.5vw;
+        }
         box-shadow: none;
         background: transparent;
       }
@@ -256,7 +269,7 @@ interface EditedValue {
 
         .exit {
           position: absolute;
-          left: 0;
+          right: 0;
           @include exit();
         }
 
@@ -291,6 +304,13 @@ interface EditedValue {
           transform: translateY(-50%) translateX(-50%);
         }
       }
+
+      @media (max-width: $mobile-width) {
+        lt-select-add, lt-toggle {
+          max-width: 100%;
+          width: 100%;
+        }
+      }
     }
   `,
 })
@@ -389,10 +409,13 @@ export class BlockEditComponent implements AfterViewInit {
 
   formatDate(ts: number): string {
     const d = new Date(ts * 1000);
-    return d.toLocaleDateString(undefined, {
+    // e.g. "May 28, 2026, 14:32"
+    return d.toLocaleString(undefined, {
       year: 'numeric',
       month: 'short',
       day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
     });
   }