From 3310be9e9b51595046b633b8dd22196c5f24caa1 Mon Sep 17 00:00:00 2001
From: Drew Haven <periodic@blazestar.net>
Date: Sat, 26 Jul 2025 13:33:14 -0700
Subject: [PATCH] Updates tabbed layouts for phones

---
 src/components/layout/TabbedLayout.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/layout/TabbedLayout.tsx b/src/components/layout/TabbedLayout.tsx
index ea0a1fb..88c10ab 100644
--- a/src/components/layout/TabbedLayout.tsx
+++ b/src/components/layout/TabbedLayout.tsx
@@ -18,15 +18,17 @@ export function TabbedLayout({
     <div className="grow p-2 flex flex-col gap-2">
       <div className="flex flex-row gap-2">{navigation}</div>
       <div>{title}</div>
-      <div className="flex flex-row justify-start grow">
-        <div className="shrink-0 grow-0 w-40 p-0">{tabs}</div>
+      <div className="flex flex-col md:flex-row justify-start grow">
+        <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
-          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}
         </div>
         {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}
           </div>
         )}