From c36c0d283c6dbfbf79cfd3241910815b09604a2d Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Tue, 26 May 2026 20:51:57 +0700
Subject: [PATCH] webapp: mobile responsive settings modal (#1576)

- settings modal is now full height and width on mobile with side tabs
laid horizontally at the top
---
 .../settings-modal/SettingsModal.tsx          | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/frontend/apps/artcraft-webapp/src/components/settings-modal/SettingsModal.tsx b/frontend/apps/artcraft-webapp/src/components/settings-modal/SettingsModal.tsx
index 96a8b31033..e3d0f39fdd 100644
--- a/frontend/apps/artcraft-webapp/src/components/settings-modal/SettingsModal.tsx
+++ b/frontend/apps/artcraft-webapp/src/components/settings-modal/SettingsModal.tsx
@@ -31,24 +31,24 @@ export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
 
   return (
     <Modal isOpen={isOpen} onClose={onClose} className="max-w-3xl" childPadding={false}>
-      <div className="h-[560px]">
-        <div className="grid h-full grid-cols-12 gap-3">
-          <div className="relative col-span-4 p-3 pt-2 after:absolute after:right-0 after:top-0 after:h-full after:w-px after:bg-ui-panel-border">
-            <div className="flex items-center gap-2.5 py-0.5">
+      <div className="h-[100dvh] sm:h-[560px]">
+        <div className="flex h-full flex-col sm:grid sm:grid-cols-12 sm:gap-3">
+          <div className="relative shrink-0 border-b border-ui-panel-border p-4 sm:col-span-4 sm:border-b-0 sm:p-3 sm:pt-2 sm:after:absolute sm:after:right-0 sm:after:top-0 sm:after:h-full sm:after:w-px sm:after:bg-ui-panel-border">
+            <div className="hidden items-center gap-2.5 py-0.5 sm:flex">
               <h2 className="text-[18px] font-semibold opacity-80">Settings</h2>
             </div>
-            <hr className="my-2 w-full border-ui-panel-border" />
-            <div className="space-y-1">
+            <hr className="my-2 hidden w-full border-ui-panel-border sm:block" />
+            <div className="flex gap-2 overflow-x-auto pe-10 sm:block sm:space-y-1 sm:overflow-visible sm:pe-0">
               {TABS.map((t) => (
                 <button
                   key={t.id}
                   onClick={() => setTab(t.id)}
                   className={twMerge(
-                    "h-9 w-full rounded-lg p-2 text-left transition-colors",
+                    "h-9 shrink-0 rounded-lg px-3 text-left transition-colors sm:w-full sm:px-2",
                     tab === t.id ? "bg-[#63636B]/20" : "hover:bg-white/[0.04]",
                   )}
                 >
-                  <div className="flex items-center gap-2.5 text-sm">
+                  <div className="flex items-center gap-2.5 whitespace-nowrap text-sm">
                     <FontAwesomeIcon icon={t.icon} />
                     {t.label}
                   </div>
@@ -57,11 +57,11 @@ export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
             </div>
           </div>
 
-          <div className="col-span-8 flex h-full flex-col overflow-y-auto relative">
-            <div className="w-full border-b border-ui-panel-border py-2.5 ps-0">
+          <div className="relative flex min-h-0 flex-1 flex-col overflow-y-auto sm:col-span-8 sm:h-full">
+            <div className="w-full border-b border-ui-panel-border px-4 py-2.5 sm:px-0">
               <h2 className="text-[18px] font-semibold">{activeLabel}</h2>
             </div>
-            <div className="p-3 ps-0 text-sm h-full">
+            <div className="h-full p-4 text-sm sm:p-3 sm:ps-0">
               {tab === "general" && <GeneralPanel />}
               {tab === "account" && <AccountPanel />}
             </div>