daniel543x/artcraft
1
0 Fork 0
mirror of https://github.com/storytold/artcraft.git synced 2026-11-07 10:31:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

webapp: mobile responsive settings modal (#1576)

Browse Source 
- settings modal is now full height and width on mobile with side tabs
laid horizontally at the top
This commit is contained in:
BFlat authored and GitHub committed 2026-05-26 20:51:57 +07:00
1 parent a8f464e7ec
commit c36c0d283c
1 file changed
+11 -11
Download Patch File Download Diff File Expand all files Collapse all files
frontend/apps/artcraft-webapp/src/components/settings-modal/SettingsModal.tsx
+11 -11
View File
@@ -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>