ref style

src/app/features/room/room-actions/RoomActions.css.ts

@@ -21,12 +21,12 @@ export const SectionLine = style({
 // #181a20 popout surface; accent colour (Invite/Leave) is applied inline.
 export const ActionRow = style({
   width: '100%',
-  minHeight: toRem(40),
+  minHeight: toRem(44),
   display: 'flex',
   alignItems: 'center',
   gap: config.space.S300,
   padding: `0 ${config.space.S300}`,
-  borderRadius: toRem(8),
+  borderRadius: toRem(10),
   background: 'transparent',
   border: 'none',
   textAlign: 'left',
@@ -84,16 +84,19 @@ export const ActionRowChevron = style({
 });
 
 // Popout container: width bump from the legacy 220px so the Notifications
-// mode word + Pinned badge breathe. Background/border/shadow come from the
+// mode word + Pinned badge breathe; softer mobile corner radius overriding
-// folds Menu `variant="Surface"` in RoomActionsMenu.
+// the folds Menu default. Background/border/shadow come from the folds Menu
+// `variant="Surface"` in RoomActionsMenu.
 export const PopoutMenu = style({
   width: toRem(280),
   maxWidth: '100vw',
+  borderRadius: toRem(16),
+  overflow: 'hidden',
 });
 
 export const PopoutGroup = style({
   display: 'flex',
   flexDirection: 'column',
-  padding: config.space.S100,
+  padding: config.space.S200,
   gap: toRem(1),
 });

src/app/features/settings/styles.css.ts

@@ -37,22 +37,26 @@ export const SettingRow = style({
   paddingRight: config.space.S400,
 });
 
-// Dawn flat-list settings — no card box/fill. Rows sit edge-to-edge directly on
+// Dawn mobile grouped-list — flat rows (no per-item card/outline) collected
-// the page, parted by hairlines (iOS/Telegram grouped-list feel). Replaces the
+// into one softly-rounded inset panel on a subtle raised fill, parted by
-// outlined-filled SequenceCard panel.
+// hairlines (iOS/Telegram inset-grouped-list feel). `overflow: hidden` clips
+// the row hairlines + any pressed tint to the rounded corners.
 export const SettingFlatGroup = style({
   display: 'flex',
   flexDirection: 'column',
+  backgroundColor: color.SurfaceVariant.Container,
+  borderRadius: toRem(16),
+  overflow: 'hidden',
 });
 
 export const SettingFlatRow = style({
   paddingTop: config.space.S300,
   paddingBottom: config.space.S300,
-  paddingLeft: config.space.S100,
+  paddingLeft: config.space.S400,
-  paddingRight: config.space.S100,
+  paddingRight: config.space.S400,
   selectors: {
     '&:not(:last-child)': {
-      borderBottom: '1px solid rgba(255, 255, 255, 0.08)',
+      borderBottom: `1px solid ${color.SurfaceVariant.ContainerLine}`,
     },
   },
 });