frontend: give settings frames the COSS default padding

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

@@ -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}
 

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">

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,

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

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,