update the expand icon location and adjust default width to 880px

justinpark · Jul 12, 2023 · 6516328 · 6516328
1 parent 35c4a9c
commit 6516328
Showing 1 changed file with 41 additions and 26 deletions.
diff --git a/...frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx b/...frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx
@@ -62,17 +62,29 @@ import {
 } from './utils';
 import DividerConfigForm from './DividerConfigForm';
 
+const MODAL_MARGIN = 16;
+
 const StyledModalWrapper = styled(StyledModal)<{ expanded: boolean }>`
-  min-width: 700px;
-  width: ${({ expanded }) => (expanded ? '100% !important' : '70%')};
+  min-width: 880px;
+  width: ${({ expanded }) => (expanded ? '100%' : '70%')} !important;
+
+  @media (max-width: ${880 + MODAL_MARGIN * 2}px) {
+    width: 100% !important;
+    min-width: auto;
+  }
 
   .ant-modal-body {
     padding: 0px;
   }
+
   ${({ expanded }) =>
     expanded &&
     css`
       height: 100%;
+
+      .ant-modal-body {
+        flex: 1 1 auto;
+      }
       .ant-modal-content {
         height: 100%;
       }
@@ -94,6 +106,10 @@ export const StyledForm = styled(AntdForm)`
   width: 100%;
 `;
 
+export const StyledExpandButtonWrapper = styled.div`
+  margin-left: ${({ theme }) => theme.gridUnit * 4}px;
+`;
+
 export const FILTERS_CONFIG_MODAL_TEST_ID = 'filters-config-modal';
 export const getFiltersConfigModalTestId = testWithId(
   FILTERS_CONFIG_MODAL_TEST_ID,
@@ -604,39 +620,38 @@ function FiltersConfigModal({
     <StyledModalWrapper
       visible={isOpen}
       maskClosable={false}
-      title={
+      title={t('Add and edit filters')}
+      expanded={expanded}
+      destroyOnClose
+      onCancel={handleCancel}
+      onOk={handleSave}
+      centered
+      data-test="filter-modal"
+      footer={
         <div
           css={css`
             display: flex;
-            justify-content: space-between;
+            justify-content: flex-end;
             align-items: flex-end;
-            margin-right: 50px;
           `}
         >
-          <div>{t('Add and edit filters')}</div>
-          <ToggleIcon
-            iconSize="l"
-            iconColor={theme.colors.grayscale.base}
-            onClick={toggleExpand}
+          <Footer
+            onDismiss={() => setSaveAlertVisible(false)}
+            onCancel={handleCancel}
+            handleSave={handleSave}
+            canSave={!erroredFilters.length}
+            saveAlertVisible={saveAlertVisible}
+            onConfirmCancel={handleConfirmCancel}
           />
+          <StyledExpandButtonWrapper>
+            <ToggleIcon
+              iconSize="l"
+              iconColor={theme.colors.grayscale.dark2}
+              onClick={toggleExpand}
+            />
+          </StyledExpandButtonWrapper>
         </div>
       }
-      expanded={expanded}
-      destroyOnClose
-      onCancel={handleCancel}
-      onOk={handleSave}
-      centered
-      data-test="filter-modal"
-      footer={
-        <Footer
-          onDismiss={() => setSaveAlertVisible(false)}
-          onCancel={handleCancel}
-          handleSave={handleSave}
-          canSave={!erroredFilters.length}
-          saveAlertVisible={saveAlertVisible}
-          onConfirmCancel={handleConfirmCancel}
-        />
-      }
     >
       <ErrorBoundary>
         <StyledModalBody expanded={expanded}>