feat: send one SMS from a person or lead and keep the dashboard inside the phone frame

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

apps/web/src/components/dashboard/HomeHero.vue

@@ -199,8 +199,10 @@ const shortcutLabel = computed(() =>
 
 .hero-body {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   gap: 0.75rem;
   min-width: 0;
+  max-width: 100%;
   padding-top: 0;
 }
 
@@ -208,6 +210,12 @@ const shortcutLabel = computed(() =>
   display: flex;
   align-items: center;
   gap: 0.9rem;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.greet-text {
+  min-width: 0;
 }
 
 .hero-avatar {
@@ -261,7 +269,8 @@ const shortcutLabel = computed(() =>
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 0.4rem;
-  max-width: 580px;
+  max-width: min(580px, 100%);
+  min-width: 0;
 }
 
 .chip {
@@ -330,8 +339,9 @@ const shortcutLabel = computed(() =>
 .hero-ask-wrap {
   display: grid;
   gap: 0.45rem;
-  max-width: 520px;
+  max-width: min(520px, 100%);
   width: 100%;
+  min-width: 0;
 }
 
 .hero-ask {
@@ -339,6 +349,8 @@ const shortcutLabel = computed(() =>
   align-items: center;
   gap: 0.55rem;
   width: 100%;
+  min-width: 0;
+  max-width: 100%;
   background: #fff;
   color: #0f172a;
   border-radius: 999px;
@@ -425,19 +437,25 @@ const shortcutLabel = computed(() =>
   }
 
   .hero-chips {
-    grid-template-columns: 1fr;
-    max-width: 420px;
+    grid-template-columns: minmax(0, 1fr);
+    max-width: min(420px, 100%);
   }
 }
 
 @media (max-width: 700px) {
   .hero {
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
     min-height: auto;
+    padding-inline: 0.85rem;
+    overflow: hidden;
   }
 
   .hero-bot {
     display: none;
   }
+
+  .hero-ask kbd {
+    display: none;
+  }
 }
 </style>