@pablozaiden/webapp 0.6.8 → 0.7.0

package/docs/settings.md

@@ -56,6 +56,12 @@ Apps can append structured custom sections:
             description: lastSync,
             actions: [{ id: "sync-now", label: "Sync now", onAction: syncNow }],
           },
+          {
+            id: "auto-sync",
+            title: "Automatic sync",
+            content: <input type="checkbox" checked={autoSync} onChange={toggleAutoSync} />,
+            contentPlacement: "inline",
+          },
           {
             id: "disconnect",
             title: "Disconnect",
@@ -73,4 +79,9 @@ Apps can append structured custom sections:
 
 `render` remains available as an escape hatch for custom controls inside a section. Prefer structured `rows` for simple settings because the framework keeps spacing, typography and danger-zone styling consistent.
 
+Row content is placed below the title and description by default. Use
+`contentPlacement: "inline"` for compact controls such as a checkbox or toggle
+that should remain on the right side of the row. Keep selects and larger
+controls at the default `"below"` placement.
+
 `scope` can be `user`, `admin` or `owner` on both sections and rows. Omitted scope behaves like `user`. Use `admin` for global app/server settings and `user` for preferences or data that belong to the signed-in user.

package/docs/ui-guidelines.md

@@ -29,7 +29,7 @@ twice without a distinct user-facing reason.
 
 The framework owns the mobile shell breakpoint. `MOBILE_BREAKPOINT_PX` and `MOBILE_MEDIA_QUERY` are exported from `@pablozaiden/webapp/web` for application JavaScript that needs to coordinate with the shell; do not add an independent `innerWidth` threshold for shell behavior. The generated document initializes the `data-wapp-mobile` marker on the root element before the client and styles load, and `WebAppRoot` keeps it synchronized with media-query changes. Custom CSS that follows the framework mobile mode should use that marker rather than repeating a numeric media query.
 
-`WebAppRoot` follows `visualViewport` resize/scroll, window resize, orientation changes, focus boundaries, and mobile media-query changes. CSS `100dvh` is the authoritative height when the browser supports dynamic viewport units; the hook removes its inline override in that case so a temporarily limited `visualViewport` cannot pin the shell after a rotation or keyboard transition. The visual-viewport pixel value and two named, bounded retries remain only as a fallback for browsers without `100dvh`. The first retry catches the post-event layout pass; the final retry catches the end of that transition when no further geometry event is emitted. These retries are implementation fallbacks, not general synchronization primitives, and are cancelled with the associated animation frame and listeners when the root is unmounted.
+`WebAppRoot` follows `visualViewport` resize/scroll, window resize, orientation changes, focus boundaries, and mobile media-query changes. CSS `100dvh` is the authoritative height when the browser supports dynamic viewport units, except while an editable control is focused and the visual viewport is materially shorter because the on-screen keyboard is open. In that keyboard state, the hook temporarily overrides the shell height with the measured visual viewport so the keyboard cannot cover the app. The visual-viewport pixel value remains the normal fallback for browsers without `100dvh`. Two named, bounded retries catch the post-event layout pass and the end of keyboard, browser-chrome, or rotation transitions when no further geometry event is emitted. These retries are implementation fallbacks, not general synchronization primitives, and are cancelled with the associated animation frame and listeners when the root is unmounted.
 
 The framework mobile mode is separate from the narrower `640px` settings-layout rules. Do not add global touch handlers or arbitrary sleeps to reproduce either behavior; use the framework drawer controls and the existing event-driven viewport lifecycle.
 
@@ -56,6 +56,8 @@ Use these first:
 | `EmptyState` | Empty or missing content |
 | `ConfirmDialog` | Destructive confirmation |
 
+The default `Panel` is the muted card surface, `DataList` renders card rows, and `Button` uses the primary medium-sized action treatment. Use an explicit variant or size only when the surface is intentionally different from the application baseline.
+
 For entity actions, prefer the framework title bar: define one `ActionMenuItem[]` builder and attach it to `SidebarNode.actions` for the route-backed node. The framework reuses those actions for both sidebar right-click and the active route title-bar menu. Use `WebAppRoot.header.getActions` only for additional actions not owned by a sidebar node.
 
 Every route component rendered by `WebAppRoot.routes` should return `Page` at the top level, including loading/error/empty states. Do not render a `Panel`, `DataList`, `EmptyState` or custom div directly into `WebAppRoot`; that skips the standard content margins and recreates the visual bug where cards touch the main content edge. For a route whose child owns viewport-sized layout and scrolling, use `<Page layout="full">` rather than overriding `.wapp-page` from the application. Use `EntityHeader` only when the page needs a content-specific heading distinct from the fixed framework title bar; do not duplicate the active route title immediately below the header.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pablozaiden/webapp",
-  "version": "0.6.8",
+  "version": "0.7.0",
   "description": "Opinionated Bun + React webapp framework for single-server apps",
   "license": "MIT",
   "type": "module",

package/src/web/WebAppRoot.tsx

@@ -13,7 +13,14 @@ import { ThemeProvider } from "./theme";
 import { WebAppConfigProvider, useWebAppConfig } from "./webapp-config";
 
 export { replaceHashRoute, replaceWebAppRoute, routeToHash } from "./routing";
-export type { HeaderContext, SettingsAction, SettingsRow, SettingsSection, WebAppRootProps } from "./root-types";
+export type {
+  HeaderContext,
+  SettingsAction,
+  SettingsRow,
+  SettingsRowContentPlacement,
+  SettingsSection,
+  WebAppRootProps,
+} from "./root-types";
 
 function routeMatches(left: WebAppRoute | undefined, right: WebAppRoute): boolean {
   if (!left) {

package/src/web/components/index.tsx

@@ -2,16 +2,20 @@ import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState, type
 import { createPortal } from "react-dom";
 import type { ActionMenuItem, BadgeVariant } from "../sidebar/types";
 
+export type ButtonVariant = "default" | "primary" | "danger" | "ghost";
+export type ButtonSize = "xs" | "sm" | "md" | "lg";
+
 export function Button({
-  variant = "default",
+  variant = "primary",
+  size = "md",
   loading = false,
   className = "",
   disabled,
   children,
   ...props
-}: ButtonHTMLAttributes<HTMLButtonElement> & { variant?: "default" | "primary" | "danger" | "ghost"; loading?: boolean }) {
+}: ButtonHTMLAttributes<HTMLButtonElement> & { variant?: ButtonVariant; size?: ButtonSize; loading?: boolean }) {
   return (
-    <button {...props} disabled={disabled || loading} className={`wapp-button wapp-button-${variant} ${className}`}>
+    <button {...props} disabled={disabled || loading} className={`wapp-button wapp-button-${variant} wapp-button-${size} ${className}`}>
       {loading ? <span className="wapp-button-spinner" aria-hidden="true" /> : null}
       {children}
     </button>
@@ -26,8 +30,17 @@ export function IconButton({
   return <button {...props} className={`wapp-icon-button ${active ? "active" : ""} ${className}`} />;
 }
 
-export function Badge({ variant = "default", className = "", children, ...props }: HTMLAttributes<HTMLSpanElement> & { variant?: BadgeVariant; children: ReactNode }) {
-  return <span {...props} className={`wapp-badge wapp-badge-${variant} ${className}`}>{children}</span>;
+export type BadgeSize = "sm" | "md";
+
+export function Badge({
+  variant = "default",
+  size = "sm",
+  className = "",
+  children,
+  ...props
+}: HTMLAttributes<HTMLSpanElement> & { variant?: BadgeVariant; size?: BadgeSize; children: ReactNode }) {
+  const sizeClass = size === "md" ? "wapp-badge-md" : "";
+  return <span {...props} className={["wapp-badge", `wapp-badge-${variant}`, sizeClass, className].filter(Boolean).join(" ")}>{children}</span>;
 }
 
 export type PageLayout = "padded" | "full";
@@ -41,9 +54,31 @@ export function Page({
   return <div {...props} className={`wapp-page ${layout === "full" ? "wapp-page-full" : ""} ${className}`.trim()}>{children}</div>;
 }
 
-export function Panel({ title, description, actions, children, className = "" }: { title?: string; description?: string; actions?: ReactNode; children?: ReactNode; className?: string }) {
+export type PanelVariant = "surface" | "muted" | "plain";
+export type PanelPadding = "default" | "compact" | "none";
+
+export interface PanelProps extends HTMLAttributes<HTMLElement> {
+  title?: string;
+  description?: string;
+  actions?: ReactNode;
+  variant?: PanelVariant;
+  padding?: PanelPadding;
+  children?: ReactNode;
+}
+
+export function Panel({
+  title,
+  description,
+  actions,
+  children,
+  variant = "muted",
+  padding = "default",
+  className = "",
+  ...props
+}: PanelProps) {
+  const paddingClass = padding === "default" ? "" : `wapp-panel-padding-${padding}`;
   return (
-    <section className={`wapp-panel ${className}`}>
+    <section {...props} className={`wapp-panel wapp-panel-${variant} ${paddingClass} ${className}`.trim()}>
       {title || description || actions ? (
         <div className="wapp-panel-header">
           <div>
@@ -111,40 +146,68 @@ export function EntityHeader({
   );
 }
 
-export function DataList({ children, empty }: { children?: ReactNode; empty?: ReactNode }) {
-  return <div className="wapp-data-list">{children ?? empty ?? null}</div>;
+export type DataListVariant = "divided" | "cards";
+
+export function DataList({
+  children,
+  empty,
+  variant = "cards",
+}: {
+  children?: ReactNode;
+  empty?: ReactNode;
+  variant?: DataListVariant;
+}) {
+  return <div className={`wapp-data-list wapp-data-list-${variant}`}>{children ?? empty ?? null}</div>;
 }
 
 export function DataListRow({
   title,
   description,
+  descriptionClassName = "",
   meta,
+  metaPlacement = "side",
   badge,
   actions,
   onClick,
+  disabled = false,
+  variant = "card",
+  className = "",
 }: {
   title: ReactNode;
   description?: ReactNode;
+  descriptionClassName?: string;
   meta?: ReactNode;
+  metaPlacement?: "side" | "below";
   badge?: ReactNode;
   actions?: ReactNode;
   onClick?: () => void;
+  disabled?: boolean;
+  variant?: "default" | "card";
+  className?: string;
 }) {
+  const rowClassName = [
+    "wapp-data-list-row",
+    variant === "card" ? "wapp-data-list-row-card" : "",
+    onClick && !disabled ? "interactive" : "",
+    disabled ? "disabled" : "",
+    className,
+  ].filter(Boolean).join(" ");
   const content = (
     <>
       <span className="wapp-data-list-row-main">
         <strong>{title}</strong>
-        {description ? <small>{description}</small> : null}
+        {description ? <small className={descriptionClassName}>{description}</small> : null}
+        {meta && metaPlacement === "below" ? <small className="wapp-data-list-row-meta-below">{meta}</small> : null}
       </span>
-      {meta ? <span className="wapp-data-list-row-meta">{meta}</span> : null}
+      {meta && metaPlacement === "side" ? <span className="wapp-data-list-row-meta">{meta}</span> : null}
       {badge ? <span className="wapp-data-list-row-badge">{badge}</span> : null}
       {actions ? <span className="wapp-data-list-row-actions">{actions}</span> : null}
     </>
   );
-  return onClick ? (
-    <button type="button" className="wapp-data-list-row interactive" onClick={onClick}>{content}</button>
+  return onClick && !disabled ? (
+    <button type="button" className={rowClassName} onClick={onClick}>{content}</button>
   ) : (
-    <div className="wapp-data-list-row">{content}</div>
+    <div className={rowClassName}>{content}</div>
   );
 }
 

package/src/web/mobile-hooks.ts

@@ -6,6 +6,32 @@ import {
   MOBILE_VIEWPORT_FIRST_SETTLE_DELAY_MS,
 } from "./mobile";
 
+const NON_TEXT_INPUT_TYPES = new Set([
+  "button",
+  "checkbox",
+  "color",
+  "file",
+  "hidden",
+  "image",
+  "radio",
+  "range",
+  "reset",
+  "submit",
+]);
+
+function isEditableElement(element: Element | null): boolean {
+  if (!element) {
+    return false;
+  }
+  if (element instanceof HTMLTextAreaElement) {
+    return !element.disabled && !element.readOnly;
+  }
+  if (element instanceof HTMLInputElement) {
+    return !element.disabled && !element.readOnly && !NON_TEXT_INPUT_TYPES.has(element.type);
+  }
+  return element instanceof HTMLElement && element.isContentEditable;
+}
+
 export function useMobileBreakpoint(): boolean {
   const [isMobile, setIsMobile] = useState(() => typeof window !== "undefined" && window.matchMedia(MOBILE_MEDIA_QUERY).matches);
 
@@ -50,6 +76,13 @@ export function useMobileViewportHeight(isMobile: boolean): void {
       root.style.removeProperty("--wapp-viewport-height");
     };
 
+    const shouldOverrideDynamicViewportHeight = () => {
+      if (!usesDynamicViewportUnit || !viewport || !isEditableElement(document.activeElement)) {
+        return false;
+      }
+      return viewport.height + 1 < window.innerHeight;
+    };
+
     const sync = () => {
       frame = 0;
       if (!isMobile) {
@@ -57,7 +90,8 @@ export function useMobileViewportHeight(isMobile: boolean): void {
         return;
       }
 
-      if (usesDynamicViewportUnit) {
+      const shouldUseVisualViewport = !usesDynamicViewportUnit || shouldOverrideDynamicViewportHeight();
+      if (!shouldUseVisualViewport) {
         clearViewportHeight();
       } else {
         const height = Math.round(viewport?.height ?? window.innerHeight);
@@ -89,7 +123,7 @@ export function useMobileViewportHeight(isMobile: boolean): void {
 
     const handleViewportTransition = () => {
       scheduleSync();
-      if (isMobile && !usesDynamicViewportUnit) {
+      if (isMobile) {
         scheduleViewportRetry(MOBILE_VIEWPORT_FIRST_SETTLE_DELAY_MS);
         scheduleViewportRetry(MOBILE_VIEWPORT_FINAL_SETTLE_DELAY_MS);
       }

package/src/web/root-types.ts

@@ -11,12 +11,15 @@ export type SettingsAction = {
   onAction: () => void;
 };
 
+export type SettingsRowContentPlacement = "below" | "inline";
+
 export type SettingsRow = {
   id: string;
   title: string;
   description?: string;
   scope?: SettingsScope;
   content?: ReactNode;
+  contentPlacement?: SettingsRowContentPlacement;
   actions?: ReactNode | SettingsAction[];
   danger?: boolean;
 };

package/src/web/settings/security-section.tsx

@@ -84,25 +84,29 @@ export function SecuritySection({ config, refresh, setError }: SecuritySectionPr
         </div>
       </div>
       {config.apiKeys.enabled ? (
-        <div className="wapp-settings-row stacked">
-          <div>
-            <strong>API keys</strong>
-            <p>Create bearer tokens for scripts and agents.</p>
-          </div>
-          <div className="wapp-row-actions"><Button type="button" onClick={() => void createKey().catch((err) => setError(String(err)))}>Create API key</Button></div>
-          {createdToken ? <code className="wapp-token">{createdToken}</code> : null}
-          <ResourceState loading={apiKeysLoading} error={apiKeysLoadError} hasData={apiKeys !== undefined} refresh={refreshApiKeys} />
-          {apiKeys?.length ? (
-            <div className="wapp-list">
-              {apiKeys.map((key) => (
-                <div className="wapp-list-row" key={key.id}>
-                  <span><strong>{key.name}</strong><small>{key.scopes.join(", ")} · {key.createdAt}</small></span>
-                  <Button type="button" variant="danger" onClick={() => setApiKeyToDelete(key)}>Delete</Button>
-                </div>
-              ))}
+        <>
+          <div className="wapp-settings-row">
+            <div className="wapp-settings-row-main">
+              <strong>API keys</strong>
+              <p>Create bearer tokens for scripts and agents.</p>
             </div>
-          ) : apiKeys !== undefined && !apiKeysLoadError ? <EmptyState title="No API keys" /> : null}
-        </div>
+            <div className="wapp-row-actions"><Button type="button" onClick={() => void createKey().catch((err) => setError(String(err)))}>Create API key</Button></div>
+          </div>
+          <div className="wapp-settings-row-content">
+            {createdToken ? <code className="wapp-token">{createdToken}</code> : null}
+            <ResourceState loading={apiKeysLoading} error={apiKeysLoadError} hasData={apiKeys !== undefined} refresh={refreshApiKeys} />
+            {apiKeys?.length ? (
+              <div className="wapp-list">
+                {apiKeys.map((key) => (
+                  <div className="wapp-list-row" key={key.id}>
+                    <span><strong>{key.name}</strong><small>{key.scopes.join(", ")} · {key.createdAt}</small></span>
+                    <Button type="button" variant="danger" onClick={() => setApiKeyToDelete(key)}>Delete</Button>
+                  </div>
+                ))}
+              </div>
+            ) : apiKeys !== undefined && !apiKeysLoadError ? <EmptyState title="No API keys" /> : null}
+          </div>
+        </>
       ) : null}
       <ConfirmDialog
         open={Boolean(apiKeyToDelete)}

package/src/web/settings/settings-view.tsx

@@ -34,13 +34,15 @@ function StructuredSettingsSection({ section }: { section: SettingsSection }) {
         if (row.danger) {
           return <DangerZone key={row.id} title={row.title} description={row.description} actions={actions} />;
         }
+        const hasInlineContent = Boolean(row.content && row.contentPlacement === "inline");
         return (
-          <div className="wapp-settings-row" key={row.id}>
-            <div>
+          <div className={`wapp-settings-row${hasInlineContent ? " inline-content" : ""}`} key={row.id}>
+            <div className="wapp-settings-row-main">
               <strong>{row.title}</strong>
               {row.description ? <p>{row.description}</p> : null}
-              {row.content ? <div className="wapp-settings-row-content">{row.content}</div> : null}
+              {row.content && !hasInlineContent ? <div className="wapp-settings-row-content">{row.content}</div> : null}
             </div>
+            {hasInlineContent ? <div className="wapp-settings-row-content inline">{row.content}</div> : null}
             {actions ? <div className="wapp-row-actions">{actions}</div> : null}
           </div>
         );

package/src/web/styles.css

@@ -3,12 +3,17 @@
   --wapp-bg: var(--wapp-shell-bg);
   --wapp-shell-bg: rgb(249 250 251 / 0.95);
   --wapp-surface: #ffffff;
+  --wapp-surface-raised: #ffffff;
   --wapp-surface-muted: #f9fafb;
+  --wapp-surface-inset: #f9fafb;
   --wapp-border: #d1d5db;
   --wapp-border-soft: #e5e7eb;
+  --wapp-border-muted: #d1d5db;
   --wapp-text: #111827;
   --wapp-muted: #4b5563;
   --wapp-muted-2: #64748b;
+  --wapp-surface-pill: #e5e7eb;
+  --wapp-pill-text: #4b5563;
   --wapp-danger: #991b1b;
   --wapp-danger-bg: #991b1b;
   --wapp-toast-success: #166534;
@@ -53,12 +58,17 @@
   --wapp-bg: var(--wapp-shell-bg);
   --wapp-shell-bg: rgb(23 23 23 / 0.95);
   --wapp-surface: #262626;
+  --wapp-surface-raised: #171717;
   --wapp-surface-muted: #171717;
+  --wapp-surface-inset: rgb(10 10 10 / 0.5);
   --wapp-border: #374151;
   --wapp-border-soft: #27272a;
+  --wapp-border-muted: #1f2937;
   --wapp-text: #f3f4f6;
   --wapp-muted: #a1a1aa;
   --wapp-muted-2: #71717a;
+  --wapp-surface-pill: #262626;
+  --wapp-pill-text: #d1d5db;
   --wapp-danger: #fca5a5;
   --wapp-danger-bg: #7f1d1d;
   --wapp-toast-success: #bbf7d0;
@@ -693,7 +703,7 @@ textarea::placeholder {
   overflow-wrap: anywhere;
 }
 
-.wapp-panel {
+:where(.wapp-panel) {
   min-width: 0;
   max-width: 100%;
   box-sizing: border-box;
@@ -703,10 +713,34 @@ textarea::placeholder {
   padding: 1.25rem;
 }
 
+.wapp-panel-muted {
+  border-color: var(--wapp-border-muted);
+  border-radius: 1rem;
+  background: var(--wapp-surface-inset);
+}
+
+.wapp-panel-plain {
+  border-color: transparent;
+  background: transparent;
+  padding: 0;
+}
+
+.wapp-panel-padding-compact {
+  padding: 1rem;
+}
+
+.wapp-panel-padding-none {
+  padding: 0;
+}
+
 .wapp-panel + .wapp-panel {
   margin-top: 1.5rem;
 }
 
+.grid > .wapp-panel {
+  margin-top: 0;
+}
+
 .wapp-panel-header {
   display: flex;
   align-items: flex-start;
@@ -727,6 +761,7 @@ textarea::placeholder {
   margin: 0;
   font-size: 1.125rem;
   font-weight: 600;
+  line-height: 1.75rem;
 }
 
 .wapp-panel-header p,
@@ -844,6 +879,12 @@ textarea::placeholder {
   border-radius: 0.875rem;
 }
 
+.wapp-data-list-cards {
+  overflow: visible;
+  border: 0;
+  border-radius: 0;
+}
+
 .wapp-data-list-row {
   box-sizing: border-box;
   width: 100%;
@@ -857,6 +898,68 @@ textarea::placeholder {
   text-align: left;
 }
 
+.wapp-data-list-row-card,
+.wapp-data-list-cards .wapp-data-list-row {
+  align-items: flex-start;
+  border: 1px solid var(--wapp-border-muted);
+  border-radius: 1rem;
+  background: var(--wapp-surface-raised);
+  padding: 0.75rem 1rem;
+}
+
+.wapp-data-list-row-card + .wapp-data-list-row-card,
+.wapp-data-list-cards .wapp-data-list-row + .wapp-data-list-row {
+  margin-top: 0.5rem;
+  border-top: 1px solid var(--wapp-border-muted);
+}
+
+.wapp-data-list-row-card .wapp-data-list-row-main strong,
+.wapp-data-list-cards .wapp-data-list-row .wapp-data-list-row-main strong {
+  overflow: visible;
+  overflow-wrap: anywhere;
+  font-weight: 500;
+  line-height: 1.25rem;
+  white-space: normal;
+}
+
+.wapp-data-list-row-card .wapp-data-list-row-main small,
+.wapp-data-list-cards .wapp-data-list-row .wapp-data-list-row-main small {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  overflow-wrap: anywhere;
+}
+
+.wapp-data-list-row-card .wapp-data-list-row-meta,
+.wapp-data-list-cards .wapp-data-list-row .wapp-data-list-row-meta {
+  border-radius: 999px;
+  background: var(--wapp-surface-pill);
+  color: var(--wapp-pill-text);
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 0.125rem 0.5rem;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.wapp-data-list-row-meta-below {
+  display: block;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  margin-top: 0.5rem;
+  overflow-wrap: anywhere;
+}
+
+.wapp-data-list-row-card.interactive:hover,
+.wapp-data-list-cards .wapp-data-list-row.interactive:hover {
+  border-color: var(--wapp-border);
+  background: var(--wapp-surface-pill);
+}
+
+.wapp-data-list-row.disabled {
+  cursor: default;
+  opacity: 0.65;
+}
+
 .wapp-data-list-row + .wapp-data-list-row {
   border-top: 1px solid var(--wapp-border-soft);
 }
@@ -983,6 +1086,30 @@ textarea::placeholder {
   transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
 }
 
+.wapp-button-xs {
+  min-height: 2rem;
+  padding: 0.25rem 0.375rem;
+  font-size: 0.75rem;
+}
+
+.wapp-button-sm {
+  min-height: 2.25rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+}
+
+.wapp-button-md {
+  min-height: 2.75rem;
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+}
+
+.wapp-button-lg {
+  min-height: 3rem;
+  padding: 0.75rem 1.5rem;
+  font-size: 1.125rem;
+}
+
 .wapp-button-spinner {
   width: 1rem;
   height: 1rem;
@@ -1152,6 +1279,11 @@ textarea::placeholder {
   padding: 0.125rem 0.5rem;
 }
 
+.wapp-badge-md {
+  font-size: 0.75rem;
+  padding: 0.25rem 0.625rem;
+}
+
 .wapp-sidebar-badge {
   flex: 0 0 auto;
   width: 0.625rem;
@@ -1359,6 +1491,16 @@ textarea::placeholder {
   gap: 1rem;
 }
 
+.wapp-settings-row-main {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.wapp-settings-row.inline-content {
+  flex-wrap: wrap;
+  align-items: center;
+}
+
 .wapp-settings-row strong {
   font-size: 0.875rem;
   font-weight: 600;
@@ -1383,6 +1525,12 @@ textarea::placeholder {
   margin-top: 0.75rem;
 }
 
+.wapp-settings-row-content.inline {
+  flex: 0 0 auto;
+  align-self: center;
+  margin-top: 0;
+}
+
 .wapp-row-actions {
   display: flex;
   flex-wrap: wrap;
@@ -2084,6 +2232,15 @@ textarea::placeholder {
   display: block;
 }
 
+:root[data-wapp-mobile] .wapp-settings-row.inline-content {
+  display: flex;
+  align-items: center;
+}
+
+:root[data-wapp-mobile] .wapp-settings-row.inline-content .wapp-row-actions {
+  flex: 1 0 100%;
+}
+
 :root[data-wapp-mobile] .wapp-row-actions {
   justify-content: flex-start;
   margin-top: 0.75rem;