fix: compliance banner hides table pagination (#1342)

dydxprotocol · Nov 27, 2024 · baddafe · baddafe
1 parent dcf8b86
commit baddafe
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 16 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -43,7 +43,6 @@ import { parseLocationHash } from '@/lib/urlUtils';
 import { config, privyConfig } from '@/lib/wagmi';
 
 import { RestrictionWarning } from './components/RestrictionWarning';
-import { ComplianceStates } from './constants/compliance';
 import { DialogTypes } from './constants/dialogs';
 import { funkitConfig, funkitTheme } from './constants/funkit';
 import { LocalStorageKey } from './constants/localStorage';
@@ -96,8 +95,7 @@ const Content = () => {
   const isShowingHeader = isNotTablet;
   const isShowingFooter = useShouldShowFooter();
 
-  const { complianceState } = useComplianceState();
-  const showRestrictionWarning = complianceState === ComplianceStates.READ_ONLY;
+  const { showRestrictionWarning } = useComplianceState();
 
   const pathFromHash = useMemo(() => {
     if (location.hash === '') {
@@ -268,6 +266,7 @@ const $Content = styled.div<{
   /* Computed */
   --page-currentHeaderHeight: 0px;
   --page-currentFooterHeight: 0px;
+  --restriction-warning-currentHeight: 0px;
 
   ${({ isShowingHeader }) =>
     isShowingHeader &&
@@ -289,6 +288,16 @@ const $Content = styled.div<{
       }
     `}
 
+  ${({ showRestrictionWarning }) =>
+    showRestrictionWarning &&
+    css`
+      --restriction-warning-currentHeight: var(--restriction-warning-height);
+
+      @media ${breakpoints.tablet} {
+        --restriction-warning-currentHeight: var(--restriction-warning-height-mobile);
+      }
+    `}
+
     /* Rules */
     ${layoutMixins.contentContainer}
 
@@ -307,10 +316,13 @@ const $Content = styled.div<{
 
   ${layoutMixins.withOuterAndInnerBorders}
   display: grid;
+
   ${({ showRestrictionWarning, isShowingHeader }) => css`
     grid-template:
       ${isShowingHeader ? css`'Header' var(--page-currentHeaderHeight)` : ''}
-      ${showRestrictionWarning ? css`'RestrictionWarning' min-content` : ''}
+      ${showRestrictionWarning
+        ? css`'RestrictionWarning' var(--restriction-warning-currentHeight)`
+        : ''}
       'Main' minmax(min-content, 1fr)
       'Footer' var(--page-currentFooterHeight)
       / 100%;

diff --git a/src/components/RestrictionWarning.tsx b/src/components/RestrictionWarning.tsx
@@ -16,24 +16,29 @@ export const RestrictionWarning = () => {
 
   return (
     <$RestrictedWarning>
-      {stringGetter({
-        key: STRING_KEYS.BLOCKED_BANNER_MESSAGE,
-        params: {
-          TERMS_OF_USE_LINK: <TermsOfUseLink isInline />,
-          HELP_LINK: (
-            <Link href={help} isInline>
-              {stringGetter({ key: STRING_KEYS.HELP_CENTER })}
-            </Link>
-          ),
-        },
-      })}
+      <span>
+        {stringGetter({
+          key: STRING_KEYS.BLOCKED_BANNER_MESSAGE,
+          params: {
+            TERMS_OF_USE_LINK: <TermsOfUseLink isInline />,
+            HELP_LINK: (
+              <Link href={help} isInline>
+                {stringGetter({ key: STRING_KEYS.HELP_CENTER })}
+              </Link>
+            ),
+          },
+        })}
+      </span>
     </$RestrictedWarning>
   );
 };
 
 const $RestrictedWarning = styled.div`
   ${layoutMixins.sticky}
   --stickyArea-totalInsetTop: var(--page-currentHeaderHeight);
+  height: var(--restriction-warning-currentHeight);
+  display: flex;
+  align-items: center;
 
   grid-area: RestrictionWarning;
   z-index: 1;

diff --git a/src/hooks/useComplianceState.tsx b/src/hooks/useComplianceState.tsx
@@ -112,5 +112,6 @@ export const useComplianceState = () => {
     complianceState,
     complianceMessage,
     disableConnectButton,
+    showRestrictionWarning: complianceState === ComplianceStates.READ_ONLY,
   };
 };
diff --git a/src/styles/constants.css b/src/styles/constants.css
@@ -8,6 +8,10 @@
   --page-footer-height: 2rem;
   --page-footer-height-mobile: 4.5rem;
 
+  /* Restriction Warning */
+  --restriction-warning-height: 3.25rem;
+  --restriction-warning-height-mobile: min-content;
+
   /* Sidebar constants */
   --sidebar-width: 20.25rem;
   --collapsed-sidebar-width: 3.5rem;

diff --git a/src/views/MarketsDropdown.tsx b/src/views/MarketsDropdown.tsx
@@ -390,7 +390,9 @@ const $Popover = styled(Popover)`
   flex-direction: column;
 
   height: calc(
-    100vh - var(--page-header-height) - var(--market-info-row-height) - var(--page-footer-height)
+    100vh - var(--page-header-height) - var(--market-info-row-height) - var(--page-footer-height) - var(
+        --restriction-warning-height
+      )
   );
 
   width: var(--marketsDropdown-openWidth);