fix: 🐛 <QueriesList/> overflow

keen · Oct 23, 2020 · 8bd60dc · 8bd60dc
1 parent 394395b
commit 8bd60dc
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 24 deletions.
diff --git a/lib/js/app/components/Browser/Browser.styles.ts b/lib/js/app/components/Browser/Browser.styles.ts
@@ -12,9 +12,7 @@ import { colors } from '@keen.io/colors';
 
 import { BACKGROUND_MAIN } from '../../constants';
 
-export const ScrollableContainer = styled.div<LayoutProps>`
-  ${layout}
-  overflow-y: auto;
+export const ScrollableContainer = styled.div`
   position: relative;
 `;
 

diff --git a/lib/js/app/components/Browser/Browser.tsx b/lib/js/app/components/Browser/Browser.tsx
@@ -143,12 +143,9 @@ const Browser: FC<Props> = ({ onEditQuery, onRunQuery, onSelectQuery }) => {
             <QueriesPlaceholder />
           ) : (
             <>
-              <ScrollableContainer
-                ref={listContainer}
-                onScroll={scrollHandler}
-                maxHeight={browserDimension.height - LIST_SCROLL_OFFSET}
-              >
+              <ScrollableContainer ref={listContainer} onScroll={scrollHandler}>
                 <QueriesList
+                  maxHeight={browserDimension.height - LIST_SCROLL_OFFSET}
                   savedQueries={filteredQueries}
                   sortSettings={sortSettings}
                   activeQuery={savedQuery.name}

diff --git a/lib/js/app/components/BrowserPreview/BrowserPreview.styles.ts b/lib/js/app/components/BrowserPreview/BrowserPreview.styles.ts
@@ -12,7 +12,7 @@ export const Card = styled.div`
 export const HeaderContainer = styled.div`
   display: flex;
   justify-content: space-between;
-  margin: 7px 0 17px 0;
+  margin: 7px 0 18px 0;
 `;
 
 export const QueryTitle = styled.div`

diff --git a/lib/js/app/components/QueriesList/QueriesList.styles.ts b/lib/js/app/components/QueriesList/QueriesList.styles.ts
@@ -3,19 +3,17 @@ import { space, layout, LayoutProps, SpaceProps } from 'styled-system';
 
 import { BACKGROUND_MAIN } from '../../constants';
 
-export const Header = styled.th<
-  SpaceProps & LayoutProps & { sortable?: boolean }
->`
+export const Header = styled.th<SpaceProps & { sortable?: boolean }>`
   text-align: left;
   white-space: nowrap;
   padding-bottom: 10px;
+  margin-bottom: 10px;
 
   position: sticky;
   background: ${BACKGROUND_MAIN};
   top: 0;
 
   ${space}
-  ${layout}
   ${(props) =>
     props.sortable &&
     css`
@@ -29,3 +27,19 @@ export const QueriesTable = styled.table`
   border-collapse: separate;
   table-layout: fixed;
 `;
+
+export const QueriesTableHeader = styled.thead`
+  display: block;
+`;
+
+export const QueriesTableBody = styled.tbody<LayoutProps>`
+  ${layout}
+  display: block;
+  width: 100%;
+  overflow-y: auto;
+`;
+
+export const QueriesTableHeaderRow = styled.tr`
+  display: grid;
+  grid-template-columns: 45% 35% 20%;
+`;
diff --git a/lib/js/app/components/QueriesList/QueriesList.tsx b/lib/js/app/components/QueriesList/QueriesList.tsx
@@ -1,7 +1,13 @@
 import React, { FC, useCallback } from 'react';
 import moment from 'moment';
 
-import { QueriesTable, Header } from './QueriesList.styles';
+import {
+  QueriesTable,
+  Header,
+  QueriesTableBody,
+  QueriesTableHeader,
+  QueriesTableHeaderRow,
+} from './QueriesList.styles';
 
 import QueriesListItem from '../QueriesListItem';
 import SortIndicators from '../SortIndicators';
@@ -17,10 +23,12 @@ type Props = {
   savedQueries: SavedQueryListItem[];
   /** Active query unique name */
   activeQuery: string;
-  /** Select query event handler */
-  onSelectQuery: (queryName: string, settings: Record<string, any>) => void;
   /** Queries sort settings */
   sortSettings: QueriesSortSettings;
+  /** Max height for overflow handling */
+  maxHeight?: number;
+  /** Select query event handler */
+  onSelectQuery: (queryName: string, settings: Record<string, any>) => void;
   /** Update sort settings event handler */
   onSortQueries: (settings: QueriesSortSettings) => void;
 };
@@ -29,6 +37,7 @@ const QueriesList: FC<Props> = ({
   savedQueries,
   activeQuery,
   sortSettings,
+  maxHeight,
   onSortQueries,
   onSelectQuery,
 }) => {
@@ -47,10 +56,9 @@ const QueriesList: FC<Props> = ({
 
   return (
     <QueriesTable>
-      <tbody>
-        <tr>
+      <QueriesTableHeader>
+        <QueriesTableHeaderRow>
           <Header
-            width="45%"
             paddingLeft={20}
             sortable
             onClick={() => sortHandler('name')}
@@ -63,11 +71,10 @@ const QueriesList: FC<Props> = ({
               }
             />
           </Header>
-          <Header width="35%" paddingLeft={10}>
+          <Header paddingLeft={10}>
             <Heading>{text.labels}</Heading>
           </Header>
           <Header
-            width="20%"
             paddingLeft={10}
             paddingRight={20}
             sortable
@@ -83,7 +90,9 @@ const QueriesList: FC<Props> = ({
               }
             />
           </Header>
-        </tr>
+        </QueriesTableHeaderRow>
+      </QueriesTableHeader>
+      <QueriesTableBody maxHeight={maxHeight}>
         {savedQueries.map(
           ({
             name,
@@ -104,7 +113,7 @@ const QueriesList: FC<Props> = ({
             />
           )
         )}
-      </tbody>
+      </QueriesTableBody>
     </QueriesTable>
   );
 };

diff --git a/lib/js/app/components/QueriesListItem/QueryListItem.styles.ts b/lib/js/app/components/QueriesListItem/QueryListItem.styles.ts
@@ -5,6 +5,11 @@ import { colors } from '@keen.io/colors';
 export const Container = styled.tr<{
   isActive: boolean;
 }>`
+  width: 100%;
+  display: grid;
+  grid-template-columns: 45% 35% 20%;
+  margin-bottom: 7px;
+
   background: ${colors.white[500]};
   cursor: pointer;
 
@@ -44,7 +49,7 @@ export const Labels = styled.td`
 `;
 
 export const UpdateDate = styled.td`
-  padding: 0 20px 0 10px;
+  padding: 20px 20px 20px 10px;
   font-size: 12px;
   line-height: 15px;
   font-family: 'Lato Regular', sans-serif;