feat: make log table scrollable FE-2060 (supabase#40044)

make scrollable

Author: jordienr

apps/studio/components/interfaces/Settings/Logs/LogColumnRenderers/AuthColumnRenderer.tsx

@@ -9,6 +9,7 @@ const columns: Column<LogData>[] = [
   {
     name: 'auth-first-column',
     key: 'auth-first-column',
+    renderHeaderCell: () => null,
     renderCell: (props) => {
       if (!props.row.level) {
         return defaultRenderCell(props)

apps/studio/components/interfaces/Settings/Logs/LogColumnRenderers/DatabaseApiColumnRender.tsx

@@ -8,6 +8,7 @@ const columns: Column<LogData>[] = [
   {
     name: 'database-api-first-column',
     key: 'database-api-first-column',
+    renderHeaderCell: () => null,
     renderCell: (props) => {
       if (!props.row.status_code && !props.row.method && !props.row.path) {
         return defaultRenderCell(props)

apps/studio/components/interfaces/Settings/Logs/LogColumnRenderers/DatabasePostgresColumnRender.tsx

@@ -8,6 +8,7 @@ const columns: Column<LogData>[] = [
   {
     name: 'database-postgres-first-column',
     key: 'database-postgres-first-column',
+    renderHeaderCell: () => null,
     renderCell: (props) => {
       if (!props.row.error_severity) {
         return defaultRenderCell(props)

apps/studio/components/interfaces/Settings/Logs/LogColumnRenderers/DefaultPreviewColumnRenderer.tsx

@@ -14,6 +14,7 @@ const columns: Column<LogData>[] = [
   {
     name: 'default-preview-first-column',
     key: 'default-preview-first-column',
+    renderHeaderCell: () => null,
     renderCell: defaultRenderCell,
   },
 ]

apps/studio/components/interfaces/Settings/Logs/LogColumnRenderers/FunctionsEdgeColumnRender.tsx

@@ -8,6 +8,7 @@ const columns: Column<LogData>[] = [
   {
     name: 'functions-edge-first-column',
     key: 'functions-edge-first-column',
+    renderHeaderCell: () => null,
     renderCell: (props) => {
       if (!props.row.status_code && !props.row.method) {
         return defaultRenderCell(props)

apps/studio/components/interfaces/Settings/Logs/LogColumnRenderers/FunctionsLogsColumnRender.tsx

@@ -8,6 +8,7 @@ const columns: Column<LogData>[] = [
   {
     name: 'functions-logs-first-column',
     key: 'functions-logs-first-column',
+    renderHeaderCell: () => null,
     renderCell: (props) => {
       if (!props.row.event_type && !props.row.level) {
         return defaultRenderCell(props)

apps/studio/styles/react-data-grid-logs.scss

@@ -1,9 +1,16 @@
 .data-grid--simple-logs {
+  .rdg {
+    overflow-x: auto;
+    min-width: 0;
+  }
+
   .rdg-cell,
   .rdg-cell span {
     @apply text-foreground-light font-normal;
     border-left: none;
     border-right: none;
+    overflow: visible;
+    text-overflow: clip;
   }
 
   .rdg-cell:first-child {
@@ -27,11 +34,18 @@
 }
 
 .data-grid--logs-explorer {
-  @apply overflow-x-scroll pb-12;
+  @apply pb-12;
+
+  .rdg {
+    overflow-x: auto;
+    min-width: 0;
+  }
 
   .rdg-cell,
   .rdg-cell span {
     @apply text-foreground-light font-normal #{!important};
+    overflow: visible;
+    text-overflow: clip;
   }
 
   .rdg-cell:first-child {