fix(explore): make horizontal scroll appears in data panel (apache#13566

) * fix(explore): make horizontal scroll appear * fix(explore): 34px -> 33px * fix(lint): dataTablesPane lint * fix(lint): prettier dataTablesPane * fix(explore): use gridUnit rather than hardcode Co-authored-by: liuyaozong <[email protected]>
ETselikov · Mar 24, 2021 · f18d14a · f18d14a
1 parent 9773aba
commit f18d14a
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 44 deletions.
diff --git a/superset-frontend/src/components/TableView/TableView.tsx b/superset-frontend/src/components/TableView/TableView.tsx
@@ -77,7 +77,7 @@ const TableViewStyles = styled.div<{
       isPaginationSticky &&
       `
         position: sticky;
-        bottom: ${theme.gridUnit * 4}px;
+        bottom: 0;
         left: 0;
     `};
   }

diff --git a/superset-frontend/src/explore/components/DataTablesPane.tsx b/superset-frontend/src/explore/components/DataTablesPane.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import React, { useCallback, useEffect, useState } from 'react';
-import { styled, t, css } from '@superset-ui/core';
+import { styled, t } from '@superset-ui/core';
 import Collapse from 'src/common/components/Collapse';
 import Tabs from 'src/common/components/Tabs';
 import Loading from 'src/components/Loading';
@@ -80,6 +80,26 @@ const TabsWrapper = styled.div<{ contentHeight: number }>`
   }
 `;
 
+const CollapseWrapper = styled.div`
+  height: 100%;
+
+  .collapse-inner {
+    height: 100%;
+
+    .ant-collapse-item {
+      height: 100%;
+
+      .ant-collapse-content {
+        height: calc(100% - ${({ theme }) => theme.gridUnit * 8}px);
+
+        .ant-collapse-content-box {
+          height: 100%;
+        }
+      }
+    }
+  }
+`;
+
 export const DataTablesPane = ({
   queryFormData,
   tableSectionHeight,
@@ -257,49 +277,39 @@ export const DataTablesPane = ({
   return (
     <SouthPane>
       <TabsWrapper contentHeight={tableSectionHeight}>
-        <Collapse
-          accordion
-          bordered={false}
-          defaultActiveKey={panelOpen ? DATAPANEL_KEY : undefined}
-          onChange={handleCollapseChange}
-          bold
-          ghost
-          css={css`
-            height: 100%;
-
-            .ant-collapse-item {
-              height: 100%;
-
-              .ant-collapse-content {
-                height: 100%;
-
-                .ant-collapse-content-box {
-                  height: 100%;
-                }
-              }
-            }
-          `}
-        >
-          <Collapse.Panel
-            header={t('Data')}
-            key={DATAPANEL_KEY}
-            css={{ paddingBottom: 12 }}
+        <CollapseWrapper>
+          <Collapse
+            accordion
+            bordered={false}
+            defaultActiveKey={panelOpen ? DATAPANEL_KEY : undefined}
+            onChange={handleCollapseChange}
+            bold
+            ghost
+            className="collapse-inner"
           >
-            <Tabs
-              fullWidth={false}
-              tabBarExtraContent={TableControls}
-              activeKey={activeTabKey}
-              onChange={setActiveTabKey}
-            >
-              <Tabs.TabPane tab={t('View results')} key={RESULT_TYPES.results}>
-                {renderDataTable(RESULT_TYPES.results)}
-              </Tabs.TabPane>
-              <Tabs.TabPane tab={t('View samples')} key={RESULT_TYPES.samples}>
-                {renderDataTable(RESULT_TYPES.samples)}
-              </Tabs.TabPane>
-            </Tabs>
-          </Collapse.Panel>
-        </Collapse>
+            <Collapse.Panel header={t('Data')} key={DATAPANEL_KEY}>
+              <Tabs
+                fullWidth={false}
+                tabBarExtraContent={TableControls}
+                activeKey={activeTabKey}
+                onChange={setActiveTabKey}
+              >
+                <Tabs.TabPane
+                  tab={t('View results')}
+                  key={RESULT_TYPES.results}
+                >
+                  {renderDataTable(RESULT_TYPES.results)}
+                </Tabs.TabPane>
+                <Tabs.TabPane
+                  tab={t('View samples')}
+                  key={RESULT_TYPES.samples}
+                >
+                  {renderDataTable(RESULT_TYPES.samples)}
+                </Tabs.TabPane>
+              </Tabs>
+            </Collapse.Panel>
+          </Collapse>
+        </CollapseWrapper>
       </TabsWrapper>
     </SouthPane>
   );