From 07f97d9f2545390fa9c7a1147e8bbf6e06df9a9a Mon Sep 17 00:00:00 2001
From: Kawa <us.fame.sq@gmail.com>
Date: Wed, 1 Apr 2026 13:23:43 +0200
Subject: [PATCH] feat(11-01): mobile-responsive layout for wizard steps

- BackendSelectionStep: responsive grid (1-col mobile, 2-col desktop) for cards; button row stacks vertically on mobile
- BackendCard: add w-full to fill grid cell on all viewports
- RemoteConfigStep/DeploymentStep/ReviewStep: flex-col sm:flex-row button rows; w-full sm:w-auto on Back/Next buttons
- StepIndicator: add hidden sm:block to all three label spans (completed, active, future)
---
 src/components/ui/BackendCard.tsx              | 2 +-
 src/components/wizard/BackendSelectionStep.tsx | 6 +++---
 src/components/wizard/DeploymentStep.tsx       | 6 +++---
 src/components/wizard/RemoteConfigStep.tsx     | 6 +++---
 src/components/wizard/ReviewStep.tsx           | 4 ++--
 src/components/wizard/StepIndicator.tsx        | 6 +++---
 6 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/ui/BackendCard.tsx b/src/components/ui/BackendCard.tsx
index 7e7e18e..18739fc 100644
--- a/src/components/ui/BackendCard.tsx
+++ b/src/components/ui/BackendCard.tsx
@@ -14,7 +14,7 @@ export function BackendCard({ name, description, selected = false, onClick, ...r
       onClick={onClick}
       data-selected={selected}
       className={[
-        'flex flex-col items-start gap-1 rounded-xl border-2 p-4 text-left transition-all',
+        'w-full flex flex-col items-start gap-1 rounded-xl border-2 p-4 text-left transition-all',
         selected
           ? 'border-primary bg-primary/10 shadow-md'
           : 'border-outline bg-surface-container shadow hover:border-primary hover:bg-surface hover:shadow-md',
diff --git a/src/components/wizard/BackendSelectionStep.tsx b/src/components/wizard/BackendSelectionStep.tsx
index 611c310..df7d0f5 100644
--- a/src/components/wizard/BackendSelectionStep.tsx
+++ b/src/components/wizard/BackendSelectionStep.tsx
@@ -72,7 +72,7 @@ export function BackendSelectionStep() {
           helpText="This becomes the section header [name] in your rclone.conf. Example: azure-prod, backup-s3. Letters, numbers, dashes, underscores only."
         />
         <RemoteNamePreview value={remoteName} />
-        <div data-testid="backend-cards">
+        <div data-testid="backend-cards" className="grid grid-cols-1 sm:grid-cols-2 gap-3 mt-4">
           {Object.entries(BACKEND_REGISTRY).map(([type, entry]) => (
             <BackendCard
               key={type}
@@ -83,8 +83,8 @@ export function BackendSelectionStep() {
             />
           ))}
         </div>
-        <div className="flex gap-3 mt-6">
-          <button type="submit" className={MD3_BTN_FILLED}>
+        <div className="flex flex-col sm:flex-row gap-3 mt-6">
+          <button type="submit" className={`${MD3_BTN_FILLED} w-full sm:w-auto`}>
             Next
           </button>
         </div>
diff --git a/src/components/wizard/DeploymentStep.tsx b/src/components/wizard/DeploymentStep.tsx
index 730bc55..7f5f0b0 100644
--- a/src/components/wizard/DeploymentStep.tsx
+++ b/src/components/wizard/DeploymentStep.tsx
@@ -92,18 +92,18 @@ export function DeploymentStep() {
       </fieldset>
 
       {/* Navigation buttons */}
-      <div className="flex gap-3 mt-6">
+      <div className="flex flex-col sm:flex-row gap-3 mt-6">
         <button
           type="button"
           onClick={() => dispatch({ type: 'SET_STEP', payload: 1 })}
-          className={MD3_BTN_OUTLINED}
+          className={`${MD3_BTN_OUTLINED} w-full sm:w-auto`}
         >
           Back
         </button>
         <button
           type="button"
           onClick={() => dispatch({ type: 'SET_STEP', payload: 3 })}
-          className={MD3_BTN_FILLED}
+          className={`${MD3_BTN_FILLED} w-full sm:w-auto`}
         >
           Next / Review
         </button>
diff --git a/src/components/wizard/RemoteConfigStep.tsx b/src/components/wizard/RemoteConfigStep.tsx
index 3312541..95297b1 100644
--- a/src/components/wizard/RemoteConfigStep.tsx
+++ b/src/components/wizard/RemoteConfigStep.tsx
@@ -111,17 +111,17 @@ export function RemoteConfigStep() {
             />
           ))
         )}
-        <div className="flex gap-3 mt-6">
+        <div className="flex flex-col sm:flex-row gap-3 mt-6">
           <button
             type="button"
             onClick={() => dispatch({ type: 'SET_STEP', payload: 0 })}
-            className={MD3_BTN_OUTLINED}
+            className={`${MD3_BTN_OUTLINED} w-full sm:w-auto`}
           >
             Back
           </button>
           <button
             type="submit"
-            className={MD3_BTN_FILLED}
+            className={`${MD3_BTN_FILLED} w-full sm:w-auto`}
           >
             Next
           </button>
diff --git a/src/components/wizard/ReviewStep.tsx b/src/components/wizard/ReviewStep.tsx
index e4896c7..a87f43a 100644
--- a/src/components/wizard/ReviewStep.tsx
+++ b/src/components/wizard/ReviewStep.tsx
@@ -131,11 +131,11 @@ export function ReviewStep() {
       )}
 
       {/* TECH-02: Back button — dispatches SET_STEP(2) */}
-      <div className="flex gap-3 mt-6">
+      <div className="flex flex-col sm:flex-row gap-3 mt-6">
         <button
           type="button"
           onClick={() => dispatch({ type: 'SET_STEP', payload: 2 })}
-          className={MD3_BTN_OUTLINED}
+          className={`${MD3_BTN_OUTLINED} w-full sm:w-auto`}
         >
           Back
         </button>
diff --git a/src/components/wizard/StepIndicator.tsx b/src/components/wizard/StepIndicator.tsx
index 8ce91ed..b9de8bf 100644
--- a/src/components/wizard/StepIndicator.tsx
+++ b/src/components/wizard/StepIndicator.tsx
@@ -42,21 +42,21 @@ export function StepIndicator() {
                     <span className="w-8 h-8 rounded-full bg-primary text-on-primary flex items-center justify-center text-sm font-medium group-focus-visible:ring-2 group-focus-visible:ring-primary/50">
                       &#10003;
                     </span>
-                    <span className="text-xs text-primary">{label}</span>
+                    <span className="text-xs text-primary hidden sm:block">{label}</span>
                   </button>
                 ) : isActive ? (
                   <div className="flex flex-col items-center gap-1">
                     <span className="w-8 h-8 rounded-full border-2 border-primary bg-primary/10 text-primary font-bold flex items-center justify-center text-sm">
                       {i + 1}
                     </span>
-                    <span className="text-xs text-primary font-semibold">{label}</span>
+                    <span className="text-xs text-primary font-semibold hidden sm:block">{label}</span>
                   </div>
                 ) : (
                   <div className="flex flex-col items-center gap-1">
                     <span className="w-8 h-8 rounded-full border-2 border-outline text-on-surface-container/40 flex items-center justify-center text-sm">
                       {i + 1}
                     </span>
-                    <span className="text-xs text-on-surface-container/40">{label}</span>
+                    <span className="text-xs text-on-surface-container/40 hidden sm:block">{label}</span>
                   </div>
                 )}
               </div>