CSS overflow tidy (#261)

crate · Dec 18, 2024 · 353ee32 · 353ee32
1 parent 9024892
commit 353ee32
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 83 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+## 2024-12-18 - 0.19.8
+
+- Tidy CSS and fix scrolling issues.
+
 ## 2024-12-17 - 0.19.7
 
 - Improve FLOAT_VECTOR output in SQL results.

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cratedb/crate-gc-admin",
-  "version": "0.19.7",
+  "version": "0.19.8",
   "author": "cratedb",
   "private": false,
   "type": "module",

diff --git a/src/components/CrateTabsShad/CrateTabsShad.tsx b/src/components/CrateTabsShad/CrateTabsShad.tsx
@@ -23,6 +23,7 @@ function CrateTabsShad({
   stickyTabBar = false,
 }: CrateTabsShadProps) {
   const [activeTab, setActiveTab] = useState<string | undefined>(undefined);
+  const hideTabs = hideWhenSingleTab && items.length === 1;
 
   const getDefaultTab = (): string => {
     if (initialActiveTab && items.map(item => item.key).includes(initialActiveTab)) {
@@ -48,10 +49,8 @@ function CrateTabsShad({
       value={activeTab}
       onValueChange={onTabChange}
     >
-      <div className="overflow-x-auto">
-        <TabsList
-          className={`min-h-10 ${hideWhenSingleTab && items.length === 1 ? 'hidden' : 'border-b'}`}
-        >
+      <div className={hideTabs ? '' : 'min-h-10 overflow-x-auto'}>
+        <TabsList className={`min-h-10 ${hideTabs ? 'hidden' : 'border-b'}`}>
           {items.map(item => (
             <TabsTrigger key={item.key} value={item.key}>
               {item.label}

diff --git a/src/components/SQLResults/SQLResultsTable.tsx b/src/components/SQLResults/SQLResultsTable.tsx
@@ -306,7 +306,7 @@ function SQLResultsTable({ result }: Params) {
   }
 
   return (
-    <div className="flex h-full w-full flex-col overflow-hidden">
+    <div className="h-full overflow-auto">
       <DataTable
         {...(output as DataTableColumnData<unknown>)}
         elementsPerPage={100}

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
@@ -2,12 +2,7 @@ import * as React from 'react';
 import { cn } from 'utils';
 
 const Table = ({ className, ...props }: React.ComponentProps<'table'>) => (
-  <div className="relative w-full grow overflow-auto">
-    <table
-      className={cn('w-full caption-bottom text-[14px]', className)}
-      {...props}
-    />
-  </div>
+  <table className={cn('w-full caption-bottom text-[14px]', className)} {...props} />
 );
 Table.displayName = 'Table';
 

diff --git a/src/routes/Automation/views/JobsTable.tsx b/src/routes/Automation/views/JobsTable.tsx
@@ -346,7 +346,7 @@ export default function JobsTable({ onDeleteJob }: JobsTableProps) {
         </Button>
       </div>
 
-      <div className="overflow-x-a w-full">
+      <div className="overflow-auto">
         <DataTable
           elementsPerPage={JOBS_TABLE_PAGE_SIZE}
           data={(enrichedScheduledJobs ?? []).sort(sortByString('name'))}

diff --git a/src/routes/Automation/views/PoliciesTable.tsx b/src/routes/Automation/views/PoliciesTable.tsx
@@ -298,7 +298,7 @@ export default function PoliciesTable({ onDeletePolicy }: PoliciesTableProps) {
         </Button>
       </div>
 
-      <div className="overflow-x-a w-full">
+      <div className="overflow-auto">
         <DataTable
           elementsPerPage={POLICIES_TABLE_PAGE_SIZE}
           noResultsLabel="No policies found"

diff --git a/src/routes/TablesShards/TablesShardsMetrics.tsx b/src/routes/TablesShards/TablesShardsMetrics.tsx
@@ -229,75 +229,80 @@ function TablesShardsMetrics() {
       </div>
 
       {/* table */}
-      <DataTable
-        columns={columns}
-        data={tablesShards.filter(row => healthFilter[row.health])}
-        className="relative w-full overflow-auto"
-        disablePagination
-        stickyHeader
-        customTableHeader={
-          <Table.Header className="sticky top-0 z-10 bg-white">
-            <Table.RowHeader className="!border-0">
-              <Table.Head className="align-bottom" rowSpan={2}>
-                Schema
-              </Table.Head>
-              <Table.Head className="align-bottom" rowSpan={2}>
-                Table / Partition name
-              </Table.Head>
-              <Table.Head className="align-bottom" rowSpan={2}>
-                <div className="flex items-center gap-2">
-                  <div>Health</div>
-                  <Popover>
-                    <PopoverTrigger>
-                      <FilterOutlined
-                        className="opacity-80 hover:opacity-100"
-                        data-testid="health-filter"
-                      />
-                    </PopoverTrigger>
-                    <PopoverContent align="end" className="select-none space-y-1">
-                      {drawFilterCheckbox(
-                        <span>{TABLE_HEALTH_DESCRIPTIONS.GREEN}</span>,
-                        TABLE_HEALTH_STATES.GREEN,
-                      )}
-                      {drawFilterCheckbox(
-                        <span>{TABLE_HEALTH_DESCRIPTIONS.YELLOW}</span>,
-                        TABLE_HEALTH_STATES.YELLOW,
-                      )}
-                      {drawFilterCheckbox(
-                        <span>{TABLE_HEALTH_DESCRIPTIONS.RED}</span>,
-                        TABLE_HEALTH_STATES.RED,
-                      )}
-                    </PopoverContent>
-                  </Popover>
-                </div>
-              </Table.Head>
-              <Table.Head className="h-8 align-bottom" colSpan={2}>
-                Configuration
-              </Table.Head>
-              <Table.Head className="h-8 align-bottom" colSpan={3}>
-                Shards
-              </Table.Head>
-              <Table.Head className="align-bottom" rowSpan={2}>
-                Total records
-              </Table.Head>
-              <Table.Head className="align-bottom" rowSpan={2}>
-                Size
-              </Table.Head>
-            </Table.RowHeader>
-            <Table.RowHeader className="!border-0">
-              <Table.Head className="h-8 align-bottom">Shards</Table.Head>
-              <Table.Head className="h-8 align-bottom">Replicas</Table.Head>
-              <Table.Head className="h-8 align-bottom">Started</Table.Head>
-              <Table.Head className="h-8 align-bottom">Missing</Table.Head>
-              <Table.Head className="h-8 align-bottom">Underreplicated</Table.Head>
-            </Table.RowHeader>
-            {/* fake bottom border to fix the problem where table borders in a sticky header when border-collapse: collapse are not sticky */}
-            <tr className="!border-b-0">
-              <th className="h-[1px] !border-b-0 bg-neutral-200 p-0" colSpan={10} />
-            </tr>
-          </Table.Header>
-        }
-      />
+      <div className="w-full grow overflow-auto">
+        <DataTable
+          columns={columns}
+          data={tablesShards.filter(row => healthFilter[row.health])}
+          className="relative w-full overflow-auto"
+          disablePagination
+          stickyHeader
+          customTableHeader={
+            <Table.Header className="sticky top-0 z-10 bg-white">
+              <Table.RowHeader className="!border-0">
+                <Table.Head className="align-bottom" rowSpan={2}>
+                  Schema
+                </Table.Head>
+                <Table.Head className="align-bottom" rowSpan={2}>
+                  Table / Partition name
+                </Table.Head>
+                <Table.Head className="align-bottom" rowSpan={2}>
+                  <div className="flex items-center gap-2">
+                    <div>Health</div>
+                    <Popover>
+                      <PopoverTrigger>
+                        <FilterOutlined
+                          className="opacity-80 hover:opacity-100"
+                          data-testid="health-filter"
+                        />
+                      </PopoverTrigger>
+                      <PopoverContent align="end" className="select-none space-y-1">
+                        {drawFilterCheckbox(
+                          <span>{TABLE_HEALTH_DESCRIPTIONS.GREEN}</span>,
+                          TABLE_HEALTH_STATES.GREEN,
+                        )}
+                        {drawFilterCheckbox(
+                          <span>{TABLE_HEALTH_DESCRIPTIONS.YELLOW}</span>,
+                          TABLE_HEALTH_STATES.YELLOW,
+                        )}
+                        {drawFilterCheckbox(
+                          <span>{TABLE_HEALTH_DESCRIPTIONS.RED}</span>,
+                          TABLE_HEALTH_STATES.RED,
+                        )}
+                      </PopoverContent>
+                    </Popover>
+                  </div>
+                </Table.Head>
+                <Table.Head className="h-8 align-bottom" colSpan={2}>
+                  Configuration
+                </Table.Head>
+                <Table.Head className="h-8 align-bottom" colSpan={3}>
+                  Shards
+                </Table.Head>
+                <Table.Head className="align-bottom" rowSpan={2}>
+                  Total records
+                </Table.Head>
+                <Table.Head className="align-bottom" rowSpan={2}>
+                  Size
+                </Table.Head>
+              </Table.RowHeader>
+              <Table.RowHeader className="!border-0">
+                <Table.Head className="h-8 align-bottom">Shards</Table.Head>
+                <Table.Head className="h-8 align-bottom">Replicas</Table.Head>
+                <Table.Head className="h-8 align-bottom">Started</Table.Head>
+                <Table.Head className="h-8 align-bottom">Missing</Table.Head>
+                <Table.Head className="h-8 align-bottom">Underreplicated</Table.Head>
+              </Table.RowHeader>
+              {/* fake bottom border to fix the problem where table borders in a sticky header when border-collapse: collapse are not sticky */}
+              <tr className="!border-b-0">
+                <th
+                  className="h-[1px] !border-b-0 bg-neutral-200 p-0"
+                  colSpan={10}
+                />
+              </tr>
+            </Table.Header>
+          }
+        />
+      </div>
     </div>
   );
 }