Frontend mobile fixes (#714)

* Allow ResourcePageHeader items to wrap

* Allow CardHeader items to wrap

* Increase z-index of sticky TableHeader, fixes #690

* Remove fixed widths from ActionButton, let them flex more to fit more layouts

* Make Section scroll overflow

* Remove grid class from Tabs, seems to prevent them from overflowing at small sizes

frontend/src/components/layouts.tsx

@@ -185,7 +185,7 @@ export const Section = ({
     {(title || icon || titleRight || titleOther || actions) && (
       <div
         className={cn(
-          "flex flex-wrap gap-2 justify-between",
+          "flex flex-wrap gap-2 justify-between overflow-x-scroll",
           itemsCenterTitleRow ? "items-center" : "items-start"
         )}
       >

frontend/src/components/resources/build/index.tsx

@@ -83,7 +83,6 @@ const ConfigInfoDeployments = ({ id }: { id: string }) => {
     <Tabs
       value={deploymentsDisabled && view === "Deployments" ? "Config" : view}
       onValueChange={setView as any}
-      className="grid gap-4"
     >
       <TabsContent value="Config">
         <BuildConfig id={id} titleOther={titleOther} />

frontend/src/components/resources/common.tsx

@@ -85,7 +85,7 @@ export const ResourcePageHeader = ({
   const background = hex_color_by_intention(intent) + "15";
   return (
     <div
-      className="flex items-center justify-between gap-4 pl-8 pr-8 py-4 rounded-t-md w-full"
+      className="flex flex-wrap items-center justify-between gap-4 pl-8 pr-8 py-4 rounded-t-md w-full"
       style={{ background }}
     >
       <div className="flex items-center gap-8">

frontend/src/components/resources/deployment/index.tsx

@@ -151,7 +151,7 @@ const ConfigTabsInner = ({
     [deployment.id]
   );
   return (
-    <Tabs value={view} onValueChange={setView as any} className="grid gap-4">
+    <Tabs value={view} onValueChange={setView as any}>
       <TabsContent value="Config">
         <DeploymentConfig id={deployment.id} titleOther={tabs} />
       </TabsContent>

frontend/src/components/resources/resource-sync/index.tsx

@@ -105,7 +105,7 @@ const ConfigInfoPending = ({ id }: { id: string }) => {
     </TabsList>
   );
   return (
-    <Tabs value={view} onValueChange={setView as any} className="grid gap-4">
+    <Tabs value={view} onValueChange={setView as any}>
       <TabsContent value="Config">
         <ResourceSyncConfig id={id} titleOther={title} />
       </TabsContent>

frontend/src/components/resources/server/index.tsx

@@ -124,7 +124,6 @@ const ConfigTabs = ({ id }: { id: string }) => {
     <Tabs
       value={currentView}
       onValueChange={setView as any}
-      className="grid gap-4"
     >
       <TabsContent value="Config">
         <ServerConfig id={id} titleOther={tabsList} />

frontend/src/components/resources/stack/index.tsx

@@ -115,7 +115,7 @@ const ConfigInfoServicesLog = ({ id }: { id: string }) => {
     </TabsList>
   );
   return (
-    <Tabs value={view} onValueChange={setView as any} className="grid gap-4">
+    <Tabs value={view} onValueChange={setView as any}>
       <TabsContent value="Config">
         <StackConfig id={id} titleOther={title} />
       </TabsContent>

frontend/src/components/util.tsx

@@ -151,7 +151,7 @@ export const ActionButton = forwardRef<
     <Button
       size={size}
       variant={variant || "secondary"}
-      className={cn("flex items-center justify-between w-[190px]", className)}
+      className={cn("flex flex-1 shrink-0 gap-4 items-center justify-between max-w-[190px]", className)}
       onClick={onClick}
       onBlur={onBlur}
       disabled={disabled || loading}

frontend/src/pages/server-info/container/index.tsx

@@ -290,7 +290,7 @@ const ContainerTabs = ({
     [server, container]
   );
   return (
-    <Tabs value={view} onValueChange={setView as any} className="grid gap-4">
+    <Tabs value={view} onValueChange={setView as any}>
       <TabsContent value="Log">
         <ContainerLogs
           id={server}

frontend/src/pages/stack-service/index.tsx

@@ -303,7 +303,7 @@ const StackServiceTabs = ({
     [stack.id, service]
   );
   return (
-    <Tabs value={view} onValueChange={setView as any} className="grid gap-4">
+    <Tabs value={view} onValueChange={setView as any}>
       <TabsContent value="Log">
         <StackServiceLogs
           id={stack.id}

frontend/src/ui/card.tsx

@@ -23,7 +23,7 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    className={cn("flex flex-col flex-wrap gap-4 space-y-1.5 p-6", className)}
     {...props}
   />
 ))

frontend/src/ui/data-table.tsx

@@ -97,7 +97,7 @@ export function DataTable<TData, TValue>({
       )}
     >
       <Table className="xl:table-fixed border-separate border-spacing-0">
-        <TableHeader className="sticky top-0">
+        <TableHeader className="sticky top-0 z-50">
           {table.getHeaderGroups().map((headerGroup, i) => (
             <TableRow key={headerGroup.id}>
               {/* placeholder header */}