feat: some mobile relevant fixes

SeanCassiere · Jul 1, 2024 · 4df6f23 · 4df6f23
1 parent 6b7aab3
commit 4df6f23
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 9 deletions.
diff --git a/src/routers/app/ui/layouts/app-container.tsx b/src/routers/app/ui/layouts/app-container.tsx
@@ -18,8 +18,8 @@ export const AppContainer: FC<PropsWithChildren<AppContainerProps>> = ({
   mainClass,
 }) => {
   return (
-    <div className="grid md:grid-cols-4 lg:grid-cols-5 min-h-full">
-      <aside class="md:col-span-1 border-r flex flex-col bg-gray-100 dark:bg-gray-800">
+    <div className="flex flex-col md:grid md:grid-cols-4 lg:grid-cols-5 min-h-full">
+      <aside class="h-[250px] border-b flex flex-col bg-gray-100 dark:bg-gray-800 md:h-auto md:col-span-1 md:border-r md:border-b-none">
         <div class="flex-grow p-2">
           <p class="pb-2">Hello {user.username}!</p>
           <p class="pb-2 border-b">Your organizations</p>

diff --git a/src/routers/app/ui/pages/app.$workspace.$serviceId.edit.tsx b/src/routers/app/ui/pages/app.$workspace.$serviceId.edit.tsx
@@ -15,7 +15,7 @@ export const ServiceEditPage: FC<{ service: ServiceRecord } & AppContainerProps>
 }) => {
   return (
     <RootDocument title={`${tenant?.name} edit`}>
-      <AppContainer user={user} tenant={tenant} tenants={tenants} mainClass="grid place-items-center px-2">
+      <AppContainer user={user} tenant={tenant} tenants={tenants} mainClass="grid place-items-center p-2 md:p-4">
         <Card class="max-w-2xl w-full">
           <div class="p-4 grid gap-2">
             <div class="flex gap-1">

diff --git a/src/routers/app/ui/pages/app.$workspace.$serviceId.index.tsx b/src/routers/app/ui/pages/app.$workspace.$serviceId.index.tsx
@@ -14,7 +14,7 @@ export const ServiceLandingPage: FC<
 > = ({ user, tenant, tenants, service }) => {
   return (
     <RootDocument title="Simple Logging Server">
-      <AppContainer user={user} tenant={tenant} tenants={tenants} mainClass="grid place-items-center px-2">
+      <AppContainer user={user} tenant={tenant} tenants={tenants} mainClass="grid place-items-center p-2 md:p-4">
         <Card class="max-w-2xl w-full">
           <div class="p-4 grid gap-2">
             <div class="flex gap-1">

diff --git a/src/routers/app/ui/pages/app.$workspace.edit.tsx b/src/routers/app/ui/pages/app.$workspace.edit.tsx
@@ -10,7 +10,7 @@ import type { TenantRecord } from "@/types/db.mjs";
 export const WorkspaceEditPage: FC<{ tenant: TenantRecord } & AppContainerProps> = ({ user, tenants, tenant }) => {
   return (
     <RootDocument title={`${tenant.name} edit`}>
-      <AppContainer user={user} tenants={tenants} tenant={tenant} mainClass="grid place-items-center px-2">
+      <AppContainer user={user} tenants={tenants} tenant={tenant} mainClass="grid place-items-center p-2 md:p-4">
         <Card class="max-w-2xl w-full">
           <div class="p-4 grid gap-2">
             <div class="flex gap-1">

diff --git a/src/routers/app/ui/pages/app.$workspace.index.tsx b/src/routers/app/ui/pages/app.$workspace.index.tsx
@@ -16,7 +16,7 @@ export const WorkspaceLandingPage: FC<
 > = ({ user, tenants, tenant, services }) => {
   return (
     <RootDocument title={`${tenant.name}`}>
-      <AppContainer user={user} tenant={tenant} tenants={tenants} mainClass="grid place-items-center px-2">
+      <AppContainer user={user} tenant={tenant} tenants={tenants} mainClass="grid place-items-center p-2 md:p-4">
         <Card class="max-w-4xl w-full">
           <div class="p-4 grid gap-2">
             <div class="flex gap-1">
@@ -30,8 +30,8 @@ export const WorkspaceLandingPage: FC<
               You can view and edit the services managed by this organization here.
             </p>
           </div>
-          <div class="border-t overflow-hidden">
-            <table class="min-w-full divide-y divide-gray-300">
+          <div class="border-t overflow-x-auto">
+            <table class="min-w-full divide-y divide-gray-300 overflow-auto">
               <thead class="bg-gray-50">
                 <tr>
                   <th

diff --git a/src/routers/app/ui/pages/app.index.tsx b/src/routers/app/ui/pages/app.index.tsx
@@ -6,7 +6,7 @@ import { AppContainer, type AppContainerProps } from "../layouts/app-container.j
 export const DashboardLandingPage: FC<{} & Omit<AppContainerProps, "tenant">> = ({ user, tenants }) => {
   return (
     <RootDocument title="Simple Logging Server">
-      <AppContainer user={user} tenants={tenants} tenant={null}>
+      <AppContainer user={user} tenants={tenants} tenant={null} mainClass="p-2 md:p-4">
         <p>There is no content on this page</p>
       </AppContainer>
     </RootDocument>