From 5961d969b1c472de57c6af974b2f0441713219ea Mon Sep 17 00:00:00 2001
From: Khalid Abdi <xamza2009@gmail.com>
Date: Wed, 15 Jul 2026 20:23:33 +0300
Subject: [PATCH] frontend: give settings frames the COSS default padding
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Clinician profile frame inset its content 40px and drew a second
border around it — a box inside a box. Both came from CardFramePanel,
added in 44d653f. It doesn't exist in the COSS registry: upstream
@coss/card ships Card, CardFrame, CardFrameHeader/Title/Description/
Action/Footer and nothing else. There is no body part because the frame
isn't meant to pad its body.

CardFrame styles its cards through *direct-child* selectors — -m-px,
the clip-path, rounded-t/b-xl, shadow-none, before:hidden — pulling each
card out by a pixel so it sits flush inside the frame's own border. The
panel wrapper made every card a grandchild, so none of those selectors
matched: the 20px came from the panel's p-5, the second border came from
the card keeping the treatment the frame was supposed to suppress. The
commit that added it claimed the cards would "pick up the frame's card
treatment"; they never did.

Drop the panel and render children directly inside the frame, which is
the COSS default. Body padding goes on the Card, where COSS puts it, so
content is inset once rather than twice. Card-bearing bodies now get the
frame treatment they were meant to have, and the divide-y lists in
Records, Care team and Signing stack flush, which is what -m-px and
rounded-t-xl were for. The notification ToggleRows lose their space-y
wrapper and read as one list.

Frames holding raw form content (the AI panel, Care team's error and
toolbar) get an explicit padded Card instead of leaning on the frame.

card.tsx is now upstream @coss/card verbatim, minus font-heading on
CardTitle.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/components/settings/settings-ai.tsx  | 43 ++++++++++-------
 .../settings/settings-care-team.tsx           | 10 ++--
 .../components/settings/settings-parts.tsx    | 34 ++++++-------
 .../settings/settings-preferences.tsx         | 48 +++++++++----------
 frontend/components/ui/card.tsx               | 20 --------
 5 files changed, 70 insertions(+), 85 deletions(-)

diff --git a/frontend/components/settings/settings-ai.tsx b/frontend/components/settings/settings-ai.tsx
index 3f395fa..695eb3b 100644
--- a/frontend/components/settings/settings-ai.tsx
+++ b/frontend/components/settings/settings-ai.tsx
@@ -15,6 +15,7 @@ import {
 } from "@/components/ui/select";
 import {
   FieldLabel,
+  SettingsCard,
   SettingsFrame,
   ToggleRow,
 } from "@/components/settings/settings-parts";
@@ -209,7 +210,6 @@ export function AIPanel() {
     <>
       {policy ? (
         <SettingsFrame
-          bodyClassName="space-y-3"
           description={t("settings.ai.availability.description")}
           title={t("settings.ai.availability.title")}
         >
@@ -238,7 +238,7 @@ export function AIPanel() {
                 />
               ) : null}
               {policyDirty ? (
-                <div className="flex justify-end">
+                <SettingsCard className="flex flex-row justify-end p-4">
                   <Button
                     disabled={savingPolicy}
                     onClick={savePolicy}
@@ -248,17 +248,19 @@ export function AIPanel() {
                       ? t("settings.ai.saving")
                       : t("settings.ai.saveChanges")}
                   </Button>
-                </div>
+                </SettingsCard>
               ) : null}
             </>
           ) : (
-            <p className="text-sm text-muted-foreground">
-              {policy.aiEnabled
-                ? policy.disabledForEmployees
-                  ? t("settings.ai.availability.readonlyEmployeesOnly")
-                  : t("settings.ai.availability.readonlyEnabled")
-                : t("settings.ai.availability.readonlyDisabled")}
-            </p>
+            <SettingsCard className="p-5">
+              <p className="text-sm text-muted-foreground">
+                {policy.aiEnabled
+                  ? policy.disabledForEmployees
+                    ? t("settings.ai.availability.readonlyEmployeesOnly")
+                    : t("settings.ai.availability.readonlyEnabled")
+                  : t("settings.ai.availability.readonlyDisabled")}
+              </p>
+            </SettingsCard>
           )}
         </SettingsFrame>
       ) : null}
@@ -267,7 +269,7 @@ export function AIPanel() {
         description={t("settings.ai.modeDescription")}
         title={t("settings.ai.modeTitle")}
       >
-        <div className="space-y-1.5">
+        <SettingsCard className="space-y-1.5 p-5">
           <FieldLabel>{t("settings.ai.mode")}</FieldLabel>
           <Select
             onValueChange={(value) => set("mode", value as AiMode)}
@@ -290,7 +292,7 @@ export function AIPanel() {
           <p className="text-xs text-muted-foreground">
             {t(`settings.ai.mode${modeHintSuffix}Hint`)}
           </p>
-        </div>
+        </SettingsCard>
       </SettingsFrame>
 
       {config.mode === "off" ? (
@@ -298,18 +300,20 @@ export function AIPanel() {
           description={t("settings.ai.offDescription")}
           title={t("settings.ai.offTitle")}
         >
-          <p className="text-sm text-muted-foreground">
-            {t("settings.ai.offNote")}
-          </p>
+          <SettingsCard className="p-5">
+            <p className="text-sm text-muted-foreground">
+              {t("settings.ai.offNote")}
+            </p>
+          </SettingsCard>
         </SettingsFrame>
       ) : config.mode !== "local" ? (
         // API and Automatic both configure a cloud provider (Automatic falls
         // back to local Ollama when no key is set).
         <SettingsFrame
-          bodyClassName="space-y-5"
           description={t("settings.ai.providerDescription")}
           title={t("settings.ai.providerTitle")}
         >
+          <SettingsCard className="space-y-5 p-5">
           <div className="grid gap-4 sm:grid-cols-2">
               <div className="space-y-1.5">
                 <FieldLabel>{t("settings.ai.provider")}</FieldLabel>
@@ -396,13 +400,14 @@ export function AIPanel() {
                 </SelectPopup>
               </Select>
             </div>
+          </SettingsCard>
         </SettingsFrame>
       ) : (
         <SettingsFrame
-          bodyClassName="space-y-5"
           description={t("settings.ai.localDescription")}
           title={t("settings.ai.localTitle")}
         >
+          <SettingsCard className="space-y-5 p-5">
           <div className="grid gap-4 sm:grid-cols-2">
               <div className="space-y-1.5">
                 <FieldLabel>{t("settings.ai.ollamaBaseUrl")}</FieldLabel>
@@ -432,15 +437,16 @@ export function AIPanel() {
                 ? t("settings.ai.testing")
                 : t("settings.ai.testConnection")}
             </Button>
+          </SettingsCard>
         </SettingsFrame>
       )}
 
       {config.mode !== "off" ? (
         <SettingsFrame
-          bodyClassName="space-y-4"
           description={t("settings.ai.veilDescription")}
           title={t("settings.ai.veilTitle")}
         >
+          <SettingsCard className="space-y-4 p-5">
           <div className="space-y-1.5">
               <FieldLabel>{t("settings.ai.veilLevel")}</FieldLabel>
               <Select
@@ -464,6 +470,7 @@ export function AIPanel() {
                 ? t("settings.ai.veilLocalNote")
                 : t("settings.ai.veilApiNote")}
             </p>
+          </SettingsCard>
         </SettingsFrame>
       ) : null}
 
diff --git a/frontend/components/settings/settings-care-team.tsx b/frontend/components/settings/settings-care-team.tsx
index 70672d3..7854566 100644
--- a/frontend/components/settings/settings-care-team.tsx
+++ b/frontend/components/settings/settings-care-team.tsx
@@ -128,13 +128,13 @@ export function CareTeamPanel({
       title={t("settings.careTeam.title")}
     >
       {error && (
-        <p className="rounded-2xl bg-destructive/10 px-3 py-2 text-sm text-destructive">
-          {error}
-        </p>
+        <SettingsCard className="bg-destructive/10 p-4">
+          <p className="text-sm text-destructive">{error}</p>
+        </SettingsCard>
       )}
 
       {canManage && (
-        <div className="flex items-center justify-between gap-4">
+        <SettingsCard className="flex flex-row items-center justify-between gap-4 p-4">
           <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
             <Info className="size-3.5 shrink-0" />
             {t("settings.careTeam.clickHint")}
@@ -143,7 +143,7 @@ export function CareTeamPanel({
             <UserPlus className="size-4" />
             {t("settings.careTeam.addMember")}
           </Button>
-        </div>
+        </SettingsCard>
       )}
 
       <SettingsCard className="divide-y divide-border">
diff --git a/frontend/components/settings/settings-parts.tsx b/frontend/components/settings/settings-parts.tsx
index 970ed96..94dc315 100644
--- a/frontend/components/settings/settings-parts.tsx
+++ b/frontend/components/settings/settings-parts.tsx
@@ -11,29 +11,35 @@ import {
   CardFrameAction,
   CardFrameDescription,
   CardFrameHeader,
-  CardFramePanel,
   CardFrameTitle,
 } from "@/components/ui/card";
 import { Switch } from "@/components/ui/switch";
 
 // A settings section rendered inside the COSS "frame" surface: a titled header
-// (with optional description + action) sitting above a padded body. Replaces the
-// old plain-`div` SettingsCard pattern so every settings panel shares one framed
-// look. Use `bodyClassName` to control the body layout (spacing/grid).
+// above one or more cards.
+//
+// Children are rendered as *direct* children of CardFrame on purpose. CardFrame
+// styles its cards through direct-child selectors (`*:data-[slot=card]:-m-px`,
+// the clip-path, `rounded-t/b-xl`, `shadow-none`, `before:hidden`) — it pulls
+// each card out by a pixel so it sits flush inside the frame's own border. Put
+// anything between the frame and the card, even an unstyled div, and every one
+// of those selectors stops matching: the card keeps its own border and shadow
+// and you get a box inside a box.
+//
+// So: no padding here. Body padding belongs on the Card (`<SettingsCard
+// className="p-5">`), which is where COSS puts it.
 export function SettingsFrame({
   title,
   description,
   action,
   children,
   className,
-  bodyClassName,
 }: {
   title: string;
   description?: string;
   action?: ReactNode;
   children: ReactNode;
   className?: string;
-  bodyClassName?: string;
 }) {
   return (
     <CardFrame className={className}>
@@ -44,14 +50,14 @@ export function SettingsFrame({
         ) : null}
         {action ? <CardFrameAction>{action}</CardFrameAction> : null}
       </CardFrameHeader>
-      <CardFramePanel className={bodyClassName}>{children}</CardFramePanel>
+      {children}
     </CardFrame>
   );
 }
 
-// Back-compat wrapper: existing panels compose with SettingsSection, which now
+// Back-compat wrapper: existing panels compose with SettingsSection, which
 // renders through the COSS frame surface so the whole settings page shares one
-// framed look. The body keeps vertical spacing between stacked children.
+// framed look.
 export function SettingsSection({
   title,
   description,
@@ -64,12 +70,7 @@ export function SettingsSection({
   children: ReactNode;
 }) {
   return (
-    <SettingsFrame
-      action={action}
-      bodyClassName="space-y-4"
-      description={description}
-      title={title}
-    >
+    <SettingsFrame action={action} description={description} title={title}>
       {children}
     </SettingsFrame>
   );
@@ -78,7 +79,8 @@ export function SettingsSection({
 // A card surface used inside settings panels. Rendering a real COSS `Card` (with
 // `data-slot="card"`) keeps settings cards consistent with the rest of the app
 // and lets them pick up the frame's card treatment. `Card` is `flex flex-col`,
-// so row layouts must pass `flex-row` in their className.
+// so row layouts must pass `flex-row` in their className. It carries no padding
+// of its own — pass `p-5` (the settings default) or a `divide-y` list.
 export function SettingsCard({
   className,
   children,
diff --git a/frontend/components/settings/settings-preferences.tsx b/frontend/components/settings/settings-preferences.tsx
index 8fc8b85..7c44fdf 100644
--- a/frontend/components/settings/settings-preferences.tsx
+++ b/frontend/components/settings/settings-preferences.tsx
@@ -337,38 +337,34 @@ export function ProfilePanel() {
         description={t("settings.profile.patientNotificationsDescription")}
         title={t("settings.profile.patientNotifications")}
       >
-        <div className="space-y-3">
-          {patientNotifications.map((item) => (
-            <ToggleRow
-              checked={Boolean(prefs[`notif.${item.titleKey}`])}
-              description={t(`settings.profile.notif.${item.descKey}`)}
-              key={item.titleKey}
-              onCheckedChange={(checked) =>
-                setPref(`notif.${item.titleKey}`, checked)
-              }
-              title={t(`settings.profile.notif.${item.titleKey}`)}
-            />
-          ))}
-        </div>
+        {patientNotifications.map((item) => (
+          <ToggleRow
+            checked={Boolean(prefs[`notif.${item.titleKey}`])}
+            description={t(`settings.profile.notif.${item.descKey}`)}
+            key={item.titleKey}
+            onCheckedChange={(checked) =>
+              setPref(`notif.${item.titleKey}`, checked)
+            }
+            title={t(`settings.profile.notif.${item.titleKey}`)}
+          />
+        ))}
       </SettingsSection>
 
       <SettingsSection
         description={t("settings.profile.accountNotificationsDescription")}
         title={t("settings.profile.accountNotifications")}
       >
-        <div className="space-y-3">
-          {accountNotifications.map((item) => (
-            <ToggleRow
-              checked={Boolean(prefs[`notif.${item.titleKey}`])}
-              description={t(`settings.profile.notif.${item.descKey}`)}
-              key={item.titleKey}
-              onCheckedChange={(checked) =>
-                setPref(`notif.${item.titleKey}`, checked)
-              }
-              title={t(`settings.profile.notif.${item.titleKey}`)}
-            />
-          ))}
-        </div>
+        {accountNotifications.map((item) => (
+          <ToggleRow
+            checked={Boolean(prefs[`notif.${item.titleKey}`])}
+            description={t(`settings.profile.notif.${item.descKey}`)}
+            key={item.titleKey}
+            onCheckedChange={(checked) =>
+              setPref(`notif.${item.titleKey}`, checked)
+            }
+            title={t(`settings.profile.notif.${item.titleKey}`)}
+          />
+        ))}
       </SettingsSection>
 
       <SettingsSection
diff --git a/frontend/components/ui/card.tsx b/frontend/components/ui/card.tsx
index e0b9be7..260be33 100644
--- a/frontend/components/ui/card.tsx
+++ b/frontend/components/ui/card.tsx
@@ -136,26 +136,6 @@ export function CardFrameFooter({
   });
 }
 
-// The padded body of a frame: content that sits between the frame header and
-// footer. Mirrors the other CardFrame* subcomponents (useRender + data-slot) so
-// a frame can be composed entirely from primitives instead of a raw <div>.
-export function CardFramePanel({
-  className,
-  render,
-  ...props
-}: useRender.ComponentProps<"div">): React.ReactElement {
-  const defaultProps = {
-    className: cn("p-5", className),
-    "data-slot": "card-frame-panel",
-  };
-
-  return useRender({
-    defaultTagName: "div",
-    props: mergeProps<"div">(defaultProps, props),
-    render,
-  });
-}
-
 export function CardHeader({
   className,
   render,