Align controls to 36/10 and make create modals full-screen on mobile.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/components/JalaliDateInput.vue

@@ -655,14 +655,15 @@ onBeforeUnmount(() => {
 
 .trigger {
   width: 100%;
-  min-height: 44px;
+  min-height: var(--control-h);
+  height: var(--control-h);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 0.6rem;
+  gap: 0.45rem;
   border: 1px solid var(--line, #e2e8f0);
-  border-radius: 12px;
-  padding: 0.7rem 0.85rem;
+  border-radius: var(--radius);
+  padding: 0 0.75rem;
   background: #fff;
   color: #0f172a;
   font: inherit;
@@ -739,6 +740,9 @@ onBeforeUnmount(() => {
 
 .trigger span {
   min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .trigger .empty {

apps/web/src/components/VoiceToTextButton.vue

@@ -318,8 +318,9 @@ onBeforeUnmount(() => {
   border: 1px solid #d7e3dc;
   background: #f4faf7;
   color: #0f766e;
-  border-radius: 999px;
-  min-height: 36px;
+  border-radius: var(--radius);
+  min-height: var(--control-h);
+  height: var(--control-h);
   padding: 0 0.75rem;
   font: inherit;
   font-size: 0.8rem;
@@ -335,13 +336,13 @@ onBeforeUnmount(() => {
   border-color: #5eead4;
   background: #042f2e;
   color: #ecfdf5;
-  min-height: 44px;
+  min-height: var(--control-h);
   padding-inline: 0.7rem 0.85rem;
   box-shadow: 0 10px 24px rgba(15, 118, 110, 0.22);
 }
 
 .vtt.busy {
-  min-height: 44px;
+  min-height: var(--control-h);
   border-color: #99f6e4;
   background: #ecfdf5;
   color: #0f766e;
@@ -411,9 +412,10 @@ onBeforeUnmount(() => {
 .toolbar.wait .vtt {
   width: auto;
   height: auto;
-  min-height: 40px;
+  min-height: var(--control-h);
+  height: var(--control-h);
   padding: 0 0.7rem;
-  border-radius: 999px;
+  border-radius: var(--radius);
 }
 
 .toolbar .vtt.on {

apps/web/src/components/activities/ActivityCommentSheet.vue

@@ -555,8 +555,9 @@ onBeforeUnmount(() => {
 }
 
 .act {
-  min-height: 48px;
-  border-radius: 14px;
+  min-height: var(--control-h);
+  height: var(--control-h);
+  border-radius: var(--radius);
   font: inherit;
   font-weight: 800;
   cursor: pointer;

apps/web/src/components/activities/ActivityPostponeSheet.vue

@@ -396,9 +396,10 @@ onBeforeUnmount(() => {
 
 .picker input {
   width: 100%;
-  min-height: 44px;
+  min-height: var(--control-h);
+  height: var(--control-h);
   border: 1px solid #e2e8f0;
-  border-radius: 12px;
+  border-radius: var(--radius);
   padding: 0.45rem 0.7rem;
   font: inherit;
   color: #0f172a;

apps/web/src/components/person-profile/ProfileEmptyState.vue

@@ -143,8 +143,9 @@ p {
   align-items: center;
   justify-content: center;
   gap: 0.4rem;
-  min-height: 48px;
-  border-radius: 16px;
+  min-height: var(--control-h);
+  height: var(--control-h);
+  border-radius: var(--radius);
   font-weight: 700;
   font-size: 0.9rem;
 }
@@ -188,9 +189,10 @@ p {
 
   .btn-primary,
   .btn-secondary {
-    min-height: 46px;
+    min-height: var(--control-h);
+    height: var(--control-h);
     font-size: 0.86rem;
-    border-radius: 14px;
+    border-radius: var(--radius);
   }
 }
 </style>

apps/web/src/components/ui/UiModal.vue

@@ -122,4 +122,78 @@ function onBackdrop(event: MouseEvent) {
   padding-top: 0;
   border-top: 1px solid #f1f5f9;
 }
+
+@media (max-width: 900px) {
+  .backdrop {
+    padding: 0;
+    place-items: stretch;
+  }
+
+  .dialog {
+    width: 100%;
+    height: 100%;
+    max-height: 100dvh;
+    border-radius: 0;
+    border: 0;
+  }
+
+  .head {
+    flex-shrink: 0;
+    padding: 0.75rem 1rem 0;
+  }
+
+  .body {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    padding: 0.75rem 1rem;
+  }
+
+  .body:has(.page.embedded) {
+    overflow: hidden;
+    padding-bottom: 0;
+  }
+
+  .body :deep(.page.embedded) {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    gap: 0.75rem;
+  }
+
+  .body :deep(.page.embedded > .form),
+  .body :deep(.page.embedded > form) {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+  }
+
+  .body :deep(.embed-actions) {
+    order: 20;
+    flex: 0 0 auto;
+    position: sticky;
+    bottom: 0;
+    margin-top: auto;
+    margin-inline: -1rem;
+    display: flex;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
+    background: #fff;
+    border-top: 1px solid #f1f5f9;
+    z-index: 3;
+  }
+
+  .body :deep(.embed-actions .btn) {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .foot {
+    flex-shrink: 0;
+    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
+  }
+}
 </style>