Terakoda/dm-companion
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updates tabbed layouts for phones

Browse Source
This commit is contained in:
Drew Haven
2025-07-26 13:33:14 -07:00
parent c7083a9b56
commit 3310be9e9b
1 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/layout/TabbedLayout.tsx
View File

@@ -18,15 +18,17 @@ export function TabbedLayout({
<div className="grow p-2 flex flex-col gap-2"> <div className="grow p-2 flex flex-col gap-2">
<div className="flex flex-row gap-2">{navigation}</div> <div className="flex flex-row gap-2">{navigation}</div>
<div>{title}</div> <div>{title}</div>
<div className="flex flex-row justify-start grow"> <div className="flex flex-col md:flex-row justify-start grow">
<div className="shrink-0 grow-0 w-40 p-0">{tabs}</div> <div className="shrink-0 grow-0 md:w-40 p-0 flex flex-row flex-wrap md:flex-col md:flex-nowrap">
{tabs}
</div>
<div <div
className={`grow p-2 bg-slate-800 border-t border-b border-r border-slate-700`} className={`grow p-2 bg-slate-800 border-t border-b border-r border-slate-700 ${flyout && "hidden"} md:block`}
> >
{content} {content}
</div> </div>
{flyout && ( {flyout && (
<div className="w-md p-2 bg-slate-800 border border-slate-700"> <div className="grow md:w-md p-2 bg-slate-800 border border-slate-700">
{flyout} {flyout}
</div> </div>
)} )}