Merge branch 'wip/next-visual-2' into wip/platform-org-wiring

Author: waleedlatif1

apps/sim/platform/design-system/components/field/field.module.css

@@ -35,6 +35,7 @@
   padding-inline: var(--spacing-8);
   background: transparent;
   color: inherit;
+  text-overflow: ellipsis;
 }
 
 .input::placeholder {

apps/sim/platform/design-system/components/modal/modal-parts.tsx

@@ -56,7 +56,8 @@ export function ModalBody({ children, label, inactive, onInput }: ModalBodyProps
 }
 
 interface ModalFooterProps {
-  confirmLabel: string
+  /** Absent for a dialog whose rows act on their own, which only closes. */
+  confirmLabel?: string
   onPrevious?: () => void
   cancelLabel?: string
   destructive?: boolean
@@ -84,9 +85,11 @@ export function ModalFooter({
       <Button variant='quiet' disabled={cancelDisabled} onClick={onPrevious}>
         {cancelLabel}
       </Button>
-      <Button variant={destructive ? 'destructive' : 'primary'} submit disabled={disabled}>
-        {confirmLabel}
-      </Button>
+      {confirmLabel && (
+        <Button variant={destructive ? 'destructive' : 'primary'} submit disabled={disabled}>
+          {confirmLabel}
+        </Button>
+      )}
     </footer>
   )
 }

apps/sim/platform/design-system/components/modal/modal.tsx

@@ -26,7 +26,8 @@ type ConfirmHandler<Args extends unknown[]> = (...args: Args) => unknown
 
 interface ModalActions {
   title: string
-  confirmLabel: string
+  /** Absent for a dialog whose rows act on their own, which only closes. */
+  confirmLabel?: string
   confirmDisabled?: boolean
   onConfirm?: ConfirmHandler<[values: FormData]>
   /** Names the dialog more specifically than its visible title. */

apps/sim/platform/design-system/styles/embedded.css

@@ -51,6 +51,13 @@
   background: var(--ui-canvas);
 }
 
+/* A phone has no sidebar toolbar for a page's first row to line up with, only the bar above it. */
+@media (max-width: 48rem) {
+  [data-platform-ui] {
+    --shell-home-row-start: var(--ui-product-section-gap);
+  }
+}
+
 [data-platform-ui][data-theme="dark"] {
   color-scheme: dark;
 }

apps/sim/platform/embedded/app/(shell)/_components/conversation/conversation.module.css

@@ -130,7 +130,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: var(--design-spacing-132) var(--design-spacing-12) var(--design-spacing-32);
+  padding: var(--design-spacing-132) var(--design-spacing-16) var(--design-spacing-32);
 }
 .landing > [data-platform-ui] {
   max-inline-size: 100%;

apps/sim/platform/embedded/app/(shell)/_components/route-status/route-status.module.css

@@ -22,5 +22,5 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  gap: var(--ui-action-gap);
+  gap: var(--spacing-8);
 }

apps/sim/platform/embedded/app/(shell)/_components/settings-navigation/settings-navigation.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { SettingsIntentLink } from '@/components/settings/settings-intent-link'
 import { usePendingSettingsSelection } from '@/components/settings/use-pending-settings-selection'
@@ -104,12 +104,18 @@ export function SettingsNavigation({ collapsed }: SettingsNavigationProps) {
     navigation.activeSection
   )
   const [query, setQuery] = useState('')
+  const nav = useRef<HTMLElement>(null)
+  // A section low in the list opens scrolled off a short window, and the current row should show.
+  useEffect(() => {
+    nav.current?.querySelector('[aria-current="page"]')?.scrollIntoView({ block: 'nearest' })
+  }, [selected])
   const searching = !collapsed && query.trim().length > 0
   const found = searching ? searchSettings(query, groups, navigation) : []
   const count = found.reduce((total, group) => total + group.results.length, 0)
 
   return (
     <nav
+      ref={nav}
       aria-label='Settings'
       className={styles.navigation}
       data-collapsed={collapsed || undefined}

apps/sim/platform/embedded/app/(shell)/home/_components/activity-list/activity-list.module.css

@@ -10,6 +10,14 @@
   max-block-size: var(--ui-widget-max-size);
   margin-inline: calc(-1 * var(--ui-row-inset));
 }
+/* The divider stops with the text, where the row's hover fill reaches past it. */
 .entries > * + * {
+  position: relative;
+}
+.entries > * + *::before {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline: var(--ui-row-inset);
   border-block-start: var(--spacing-stroke-default) solid var(--ui-divider);
+  content: "";
 }

apps/sim/platform/embedded/app/(shell)/home/_components/calendar/calendar-day.module.css

@@ -52,8 +52,10 @@
   block-size: var(--spacing-stroke-default);
   background: var(--ui-divider);
 }
+/* Above the now line, which would otherwise rule through a short card's title. */
 .event,
 .overflow {
+  z-index: 2;
   grid-column: 2;
   min-inline-size: 0;
   margin-block: calc(var(--spacing-4) / 2);

apps/sim/platform/embedded/app/(shell)/home/_components/home-dashboard/home-dashboard.module.css

@@ -17,6 +17,11 @@
   margin-inline: auto;
   padding-block: var(--design-spacing-64) var(--design-spacing-24);
 }
+@media (max-width: 48rem) {
+  .dashboard {
+    padding-block-start: var(--design-spacing-24);
+  }
+}
 /* Customize Home's menu opens over the composer, whose own stacking stays within its row. */
 .dashboard > :first-child {
   position: relative;