Fix styling

enso-org · Aug 17, 2023 · a5bb1c7 · a5bb1c7
1 parent a57dd0f
commit a5bb1c7
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 29 deletions.
diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/column.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/column.tsx
@@ -88,12 +88,12 @@ export const COLUMN_NAME: Record<Column, string> = {
 } as const
 
 const COLUMN_CSS_CLASSES =
-    'text-left bg-clip-padding border-transparent border-l-2 border-r-2 first:border-l-0 last:border-r-0'
-const NORMAL_COLUMN_CSS_CLASSES = `px-4 py-1 last:rounded-r-full last:w-full ${COLUMN_CSS_CLASSES}`
+    'text-left bg-clip-padding border-transparent border-l-2 border-r-2 first:border-l-0 last:border-r-0 pt-1 pb-1.5'
+const NORMAL_COLUMN_CSS_CLASSES = `px-4 last:rounded-r-full last:w-full ${COLUMN_CSS_CLASSES}`
 
 /** CSS classes for every column. Currently only used to set the widths. */
 export const COLUMN_CSS_CLASS: Record<Column, string> = {
-    [Column.name]: `min-w-60 px-1.5 py-2 rounded-l-full ${NORMAL_COLUMN_CSS_CLASSES}`,
+    [Column.name]: `min-w-60 px-1.5 rounded-l-full ${COLUMN_CSS_CLASSES}`,
     [Column.modified]: `min-w-40 ${NORMAL_COLUMN_CSS_CLASSES}`,
     [Column.sharedWith]: `min-w-36 ${NORMAL_COLUMN_CSS_CLASSES}`,
     [Column.tags]: `min-w-80 ${NORMAL_COLUMN_CSS_CLASSES}`,

diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/assetsTable.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/assetsTable.tsx
@@ -813,7 +813,7 @@ export default function AssetsTable(props: AssetsTableProps) {
         <div className="flex-1 overflow-auto">
             <div className="flex flex-col w-min min-w-full h-full">
                 <div className="h-0">
-                    <div className="block sticky right-0 px-2 py-1 ml-auto mt-3.5 w-29 z-10">
+                    <div className="block sticky right-0 px-2 py-1 ml-auto mt-0.5 w-29 z-10">
                         <div className="inline-flex gap-3">
                             {columnModule.EXTRA_COLUMNS.map(column => (
                                 <Button

diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/driveView.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/driveView.tsx
@@ -219,21 +219,6 @@ export default function DriveView(props: DriveViewProps) {
         }
     }, [page])
 
-    const assetsTable = (
-        <AssetsTable
-            items={assets}
-            filter={assetFilter}
-            isLoading={isLoadingAssets}
-            appRunner={appRunner}
-            assetEvents={assetEvents}
-            dispatchAssetEvent={dispatchAssetEvent}
-            assetListEvents={assetListEvents}
-            dispatchAssetListEvent={dispatchAssetListEvent}
-            doOpenIde={doOpenEditor}
-            doCloseIde={doCloseEditor}
-        />
-    )
-
     return (
         <div
             className={`flex flex-col flex-1 overflow-hidden gap-2.5 px-3.25 ${
@@ -253,16 +238,25 @@ export default function DriveView(props: DriveViewProps) {
                     dispatchAssetEvent={dispatchAssetEvent}
                 />
             </div>
-            {backend.type === backendModule.BackendType.remote ? (
-                <div className="flex gap-3">
-                    <div className="flex flex-col gap-4">
+            <div className="flex flex-1 gap-3 overflow-hidden">
+                {backend.type === backendModule.BackendType.remote && (
+                    <div className="flex flex-col gap-4 py-1">
                         <CategorySwitcher />
                     </div>
-                    {assetsTable}
-                </div>
-            ) : (
-                assetsTable
-            )}
+                )}
+                <AssetsTable
+                    items={assets}
+                    filter={assetFilter}
+                    isLoading={isLoadingAssets}
+                    appRunner={appRunner}
+                    assetEvents={assetEvents}
+                    dispatchAssetEvent={dispatchAssetEvent}
+                    assetListEvents={assetListEvents}
+                    dispatchAssetListEvent={dispatchAssetListEvent}
+                    doOpenIde={doOpenEditor}
+                    doCloseIde={doCloseEditor}
+                />
+            </div>
             {isFileBeingDragged &&
             organization != null &&
             backend.type === backendModule.BackendType.remote ? (

diff --git a/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/table.tsx b/app/ide-desktop/lib/dashboard/src/authentication/src/dashboard/components/table.tsx
@@ -275,7 +275,7 @@ export default function Table<T, State = never, RowState = never, Key extends st
 
     return (
         <table
-            className="grow rounded-rows self-start table-fixed border-collapse mt-2"
+            className="grow rounded-rows self-start table-fixed border-collapse"
             onContextMenu={event => {
                 onContextMenu(selectedKeys, event, setSelectedKeys)
             }}

diff --git a/app/ide-desktop/lib/dashboard/tailwind.config.ts b/app/ide-desktop/lib/dashboard/tailwind.config.ts
@@ -66,7 +66,6 @@ export const theme = {
             '1.75': '0.4375rem',
             '2.25': '0.5625rem',
             '3.25': '0.8125rem',
-            '3.5': '0.875rem',
             '4.75': '1.1875rem',
             '5.5': '1.375rem',
             '6.5': '1.625rem',