Make popover fullscreen for small devices (#13553)

GitOrigin-RevId: 4a5d0511f8fd41163c549c49a937fa735f5bac8f
lightsparkdev · Nov 26, 2024 · e44b6a2 · e44b6a2
1 parent bf36749
commit e44b6a2
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 14 deletions.
diff --git a/packages/ui/src/components/DataManagerTable/Popover.tsx b/packages/ui/src/components/DataManagerTable/Popover.tsx
@@ -1,7 +1,9 @@
 import styled from "@emotion/styled";
+import { useBreakpoints } from "../../styles/breakpoints.js";
 import { Spacing } from "../../styles/tokens/spacing.js";
 import { z } from "../../styles/z-index.js";
 import { Button } from "../Button.js";
+import { Modal } from "../Modal.js";
 
 type Side = "left" | "right";
 
@@ -21,6 +23,9 @@ export const Popover = ({
   onClear: () => void;
   children: React.ReactNode;
 }) => {
+  const breakPoint = useBreakpoints();
+  const isSm = breakPoint.isSm();
+
   const handleApply = () => {
     onApply();
   };
@@ -33,18 +38,29 @@ export const Popover = ({
     }
   };
 
+  const content = (
+    <Content onKeyDownCapture={handleKeyPress} isSm={isSm}>
+      {children}
+      <Footer>
+        <Button text="Clear" onClick={handleClear} />
+        <FooterRight>
+          <Button text="Cancel" onClick={() => setShow(false)} />
+          <Button text="Apply" kind="primary" onClick={handleApply} />
+        </FooterRight>
+      </Footer>
+    </Content>
+  );
+  if (isSm) {
+    return (
+      <Modal visible={show} onClose={() => setShow(false)} smKind="fullscreen">
+        {content}
+      </Modal>
+    );
+  }
+
   return (
-    <Container show={show} side={side} onKeyDownCapture={handleKeyPress}>
-      <Content>
-        {children}
-        <Footer>
-          <Button text="Clear" onClick={handleClear} />
-          <FooterRight>
-            <Button text="Cancel" onClick={() => setShow(false)} />
-            <Button text="Apply" kind="primary" onClick={handleApply} />
-          </FooterRight>
-        </Footer>
-      </Content>
+    <Container show={show} side={side}>
+      {content}
     </Container>
   );
 };
@@ -64,11 +80,11 @@ const Container = styled.div<{ show: boolean; side: Side }>`
     0px 4px 8px 0px rgba(0, 0, 0, 0.08);
 `;
 
-const Content = styled.div`
+const Content = styled.div<{ isSm?: boolean }>`
   display: flex;
   flex-direction: column;
   gap: ${Spacing.px.xl};
-  padding: ${Spacing.px.lg};
+  padding: ${({ isSm }) => (isSm ? "0px" : Spacing.px.lg)};
 `;
 
 const Footer = styled.div`

diff --git a/packages/ui/src/components/Modal.tsx b/packages/ui/src/components/Modal.tsx
@@ -531,14 +531,15 @@ const ModalContent = styled.div<{
   display: flex;
   flex-direction: column;
 
-  ${({ ghost, width }) => `
+  ${({ ghost, smKind, width }) => `
     ${ghost ? "" : standardBorderRadius(16)}
     width: ${width}px;
   `}
 
   ${({ smKind }) =>
     smKind === "fullscreen"
       ? bp.sm(`
+          border-radius: 0px;
           width: 100%;
           height: 100dvh;
         `)