[fix] Improve data table horizontal overflow and dataset tabs overflow (

#2348) Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>
keplergl · Oct 2, 2023 · 1f169df · 1f169df
1 parent f255944
commit 1f169df
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 15 deletions.
diff --git a/src/components/src/common/data-table/index.tsx b/src/components/src/common/data-table/index.tsx
@@ -97,7 +97,6 @@ export const Container = styled.div<ContainerProps>`
     flex-direction: row;
     flex-grow: 1;
     overflow: hidden;
-    border-top: none;
 
     .scroll-in-ui-thread.pinned-columns--header {
       overflow: hidden;

diff --git a/src/components/src/common/dataset-label.tsx b/src/components/src/common/dataset-label.tsx
@@ -29,6 +29,7 @@ const DatasetName = styled.div.attrs({
   font-weight: 500;
   font-size: 12px;
   color: ${props => props.theme.titleColorLT};
+  white-space: nowrap;
 `;
 
 interface DatasetLabelType {

diff --git a/src/components/src/modals/data-table-modal.tsx b/src/components/src/modals/data-table-modal.tsx
@@ -50,7 +50,15 @@ const StyledModal = styled.div`
 
 const DatasetCatalog = styled.div`
   display: flex;
-  padding: ${dgSettings.verticalPadding} ${dgSettings.sidePadding} 0;
+  padding: ${dgSettings.verticalPadding} ${dgSettings.sidePadding} 0 0;
+
+  .overflow-horizontal {
+    display: flex;
+    overflow-x: auto;
+    overflow-y: hidden;
+    flex-direction: row;
+    ${props => props.theme.modalScrollBar}
+  }
 `;
 
 interface DatasetModalTabProps {
@@ -66,9 +74,8 @@ export const DatasetModalTab = styled.div<DatasetModalTabProps>`
   margin: 0 3px;
   padding: 0 5px;
 
-  :first-child {
-    margin-left: 0;
-    padding-left: 0;
+  :hover {
+    border-bottom: 3px solid black;
   }
 `;
 
@@ -81,6 +88,7 @@ const StyledConfigureButton = styled.div`
   svg {
     stroke: black;
   }
+  cursor: pointer;
 `;
 
 interface DatasetTabsUnmemoizedProps {
@@ -95,16 +103,18 @@ const DatasetTabsUnmemoized: React.FC<DatasetTabsUnmemoizedProps> = ({
   showDatasetTable
 }) => (
   <DatasetCatalog className="dataset-modal-catalog">
-    {Object.values(datasets).map(dataset => (
-      <DatasetModalTab
-        className="dataset-modal-tab"
-        active={dataset === activeDataset}
-        key={dataset.id}
-        onClick={() => showDatasetTable(dataset.id)}
-      >
-        <DatasetLabel dataset={dataset} />
-      </DatasetModalTab>
-    ))}
+    <div className="overflow-horizontal">
+      {Object.values(datasets).map(dataset => (
+        <DatasetModalTab
+          className="dataset-modal-tab"
+          active={dataset === activeDataset}
+          key={dataset.id}
+          onClick={() => showDatasetTable(dataset.id)}
+        >
+          <DatasetLabel dataset={dataset} />
+        </DatasetModalTab>
+      ))}
+    </div>
   </DatasetCatalog>
 );
 
@@ -120,6 +130,7 @@ const TableContainer = styled.div`
   flex-grow: 1;
   min-height: 100%;
   max-height: 100%;
+  max-width: 100%;
 `;
 
 interface DataTableModalProps {