refactor(app): migrate shared styles to tailwind

src/app/_components/core/__tests__/tailwind-components.test.tsx

@@ -4,6 +4,7 @@ import { describe, expect, it } from "vitest";
 import { Checkbox } from "../checkbox";
 import { LoadingIndicator } from "../loading-indicator";
 import { PageLoadingFallback } from "../page-loading-fallback";
+import { ResponsiveMobileShell } from "../responsive-mobile-shell";
 
 describe("core Tailwind components", () => {
   it("renders LoadingIndicator with accessible status and dynamic sizing", () => {
@@ -54,4 +55,22 @@ describe("core Tailwind components", () => {
     expect(labeledHtml).toContain("gap-(--spacing-sm)");
   });
 
+  it("renders ResponsiveMobileShell with bounded canvas utilities", () => {
+    const html = renderToStaticMarkup(
+      <ResponsiveMobileShell
+        background="#fff"
+        outerBackground="#000"
+        className="custom-content"
+      >
+        Content
+      </ResponsiveMobileShell>,
+    );
+
+    expect(html).toContain("min-h-(--app-viewport-height,100dvh)");
+    expect(html).toContain("max-w-(--app-max-width,540px)");
+    expect(html).toContain("overflow-x-clip");
+    expect(html).toContain("custom-content");
+    expect(html).toContain("Content");
+  });
+
 });

src/app/_components/core/responsive-mobile-shell.tsx

@@ -1,7 +1,5 @@
 import type { CSSProperties, ReactNode } from "react";
 
-import styles from "./responsive-mobile-shell.module.css";
-
 export interface ResponsiveMobileShellProps {
   children: ReactNode;
   /** Background used inside the mobile canvas. */
@@ -24,8 +22,18 @@ export function ResponsiveMobileShell({
   } as CSSProperties;
 
   return (
-    <div className={styles.shell} style={style}>
-      <div className={[styles.content, className].filter(Boolean).join(" ")}>
+    <div
+      className="flex min-h-(--app-viewport-height,100dvh) w-full min-w-0 flex-[1_1_auto] justify-center overflow-x-hidden bg-(--mobile-shell-outer-background,#000000)"
+      style={style}
+    >
+      <div
+        className={[
+          "relative flex min-h-(--app-viewport-height,100dvh) w-full min-w-0 max-w-(--app-max-width,540px) flex-[1_1_auto] flex-col overflow-x-hidden overflow-x-clip bg-(--mobile-shell-background,transparent)",
+          className,
+        ]
+          .filter(Boolean)
+          .join(" ")}
+      >
         {children}
       </div>
     </div>