Update mobile styling for Work Filter

components/Facets/Filter/Filter.styled.ts

@@ -105,6 +105,7 @@ const FilterFooter = styled("footer", {
   width: "100%",
   display: "flex",
   justifyContent: "space-between",
+  alignItems: "center",
 
   button: {
     display: "flex",
@@ -129,6 +130,10 @@ const FilterFooter = styled("footer", {
     "&:last-child": {
       marginRight: "0",
     },
+
+    "@sm": {
+      fontSize: "$gr3",
+    },
   },
 });
 

components/Facets/Filter/GroupList.styled.ts

@@ -4,6 +4,8 @@ import { styled } from "@/stitches.config";
 
 /* eslint sort-keys: 0 */
 
+const Group = styled(Accordion.Item, {});
+
 const GroupContent = styled(Accordion.Content, {
   marginBottom: "$gr2",
 });
@@ -76,6 +78,10 @@ const GroupToggle = styled(Accordion.Trigger, {
       opacity: "1",
     },
   },
+
+  "@sm": {
+    height: "$gr4",
+  },
 });
 
 const ItemList = styled(Tabs.List, {
@@ -123,13 +129,28 @@ const ItemToggle = styled(Tabs.Trigger, {
   "&:hover, &:focus": {
     color: "$purple",
   },
+
+  "@sm": {
+    height: "$gr4",
+  },
 });
 
 const ItemContent = styled(Tabs.Content, {
   padding: "0.5rem 2rem",
+
+  "@md": {
+    padding: "0.5rem $gr3 0.5rem $gr3",
+  },
 });
 
-const Group = styled(Accordion.Item, {});
+const TabsRoot = styled(Tabs.Root, {
+  display: "flex",
+  padding: "1rem 0",
+
+  "@sm": {
+    flexDirection: "column",
+  },
+});
 
 export {
   Group,
@@ -140,4 +161,5 @@ export {
   ItemContent,
   ItemList,
   ItemToggle,
+  TabsRoot,
 };

components/Facets/Filter/GroupList.tsx

@@ -1,5 +1,4 @@
 import * as Accordion from "@radix-ui/react-accordion";
-import * as Tabs from "@radix-ui/react-tabs";
 import { ALL_FACETS, FACETS } from "@/lib/constants/facets-model";
 import {
   Group,
@@ -10,6 +9,7 @@ import {
   ItemContent,
   ItemList,
   ItemToggle,
+  TabsRoot,
 } from "@/components/Facets/Filter/GroupList.styled";
 import Facet from "@/components/Facets/Facet/Facet";
 import { IconChevronDown } from "@/components/Shared/SVG/Icons";
@@ -30,10 +30,9 @@ const FacetsGroupList: React.FC = () => {
   }
 
   return (
-    <Tabs.Root
+    <TabsRoot
       defaultValue={defaultFacetId}
       orientation="vertical"
-      style={{ display: "flex", padding: "1rem 0" }}
       data-testid="facets-group-list"
     >
       <Accordion.Root type="single" defaultValue={defaultGroup}>
@@ -70,7 +69,7 @@ const FacetsGroupList: React.FC = () => {
           </ItemContent>
         );
       })}
-    </Tabs.Root>
+    </TabsRoot>
   );
 };
 

components/Facets/Filter/Modal.tsx

@@ -49,7 +49,13 @@ const FilterModal: React.FC<FilterModalProps> = ({ q, setIsModalOpen }) => {
             Results for &ldquo;<strong>{q}</strong>&rdquo;
           </em>
         )}
-        <FilterClose data-testid="facets-filter-close" aria-label="Cancel">
+        <FilterClose
+          data-testid="facets-filter-close"
+          aria-label="Cancel"
+          style={{
+            marginRight: "0",
+          }}
+        >
           <IconClear />
         </FilterClose>
       </FilterHeader>

components/Facets/Filter/Preview.styled.ts

@@ -41,6 +41,10 @@ const PreviewItem = styled("li", {
     overflowWrap: "anywhere",
     whiteSpace: "break-spaces",
   },
+
+  "@md": {
+    padding: "0 $gr3",
+  },
 });
 
 const PreviewList = styled("ul", {
@@ -51,11 +55,18 @@ const PreviewList = styled("ul", {
 });
 
 const StyledPreview = styled("div", {
+  paddingTop: "1.5rem",
+
   [`& ${StyledHeading}`]: {
     fontFamily: "$northwesternDisplayBold",
     fontSize: "$gr5",
     fontWeight: "400",
     padding: "0 $gr4",
+    marginTop: "0",
+
+    "@md": {
+      padding: "0 $gr3",
+    },
   },
 });
 

components/Facets/Filter/Submit.tsx

@@ -45,7 +45,7 @@ const FacetsFilterSubmit: React.FC<FacetsFilterSubmitProps> = ({
   };
 
   return (
-    <div data-testid="facets-submit">
+    <div data-testid="facets-submit" style={{ display: "flex" }}>
       <Button
         isPrimary
         isLowercase