From a35371dc6074999f572b272062642bc4bdbabd3f Mon Sep 17 00:00:00 2001
From: marcelines <marcio@status.im>
Date: Wed, 7 Jun 2023 14:13:21 +0100
Subject: [PATCH] feat: add correct alignment for filters depending on
 breakpoint

---
 .../table-issues/filters/filter-with-checkboxes.tsx      | 9 ++++++++-
 .../src/pages/insights/workstreams/[workstream].tsx      | 7 +++----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/apps/website/src/components/table-issues/filters/filter-with-checkboxes.tsx b/apps/website/src/components/table-issues/filters/filter-with-checkboxes.tsx
index 2585af4d..9f3dad3b 100644
--- a/apps/website/src/components/table-issues/filters/filter-with-checkboxes.tsx
+++ b/apps/website/src/components/table-issues/filters/filter-with-checkboxes.tsx
@@ -4,6 +4,8 @@ import { Avatar, Button, Input, Text } from '@status-im/components'
 import { DropdownMenu } from '@status-im/components/src/dropdown-menu'
 import { DropdownIcon, SearchIcon } from '@status-im/icons'
 
+import { useCurrentBreakpoint } from '@/hooks/use-current-breakpoint'
+
 import { ColorCircle } from './components/color-circle'
 
 import type { ColorTokens } from '@tamagui/core'
@@ -54,6 +56,8 @@ const FilterWithCheckboxes = (props: Props) => {
   const [selectedValues, setSelectedValues] = useState<number[]>([])
   const [isOpen, setIsOpen] = useState(false)
 
+  const currentBreakpoint = useCurrentBreakpoint()
+
   return (
     <div className={noPadding ? '' : 'pr-2'}>
       <DropdownMenu onOpenChange={() => setIsOpen(!isOpen)}>
@@ -72,7 +76,10 @@ const FilterWithCheckboxes = (props: Props) => {
         >
           {label}
         </Button>
-        <DropdownMenu.Content sideOffset={10} align="end">
+        <DropdownMenu.Content
+          sideOffset={10}
+          align={currentBreakpoint === '2xl' ? 'end' : 'start'}
+        >
           <div className="p-2 px-1">
             <Input
               placeholder="Find epics"
diff --git a/apps/website/src/pages/insights/workstreams/[workstream].tsx b/apps/website/src/pages/insights/workstreams/[workstream].tsx
index 048c39b0..38a3a770 100644
--- a/apps/website/src/pages/insights/workstreams/[workstream].tsx
+++ b/apps/website/src/pages/insights/workstreams/[workstream].tsx
@@ -9,15 +9,14 @@ const WorkstreamDetailPage: Page = () => {
       <div className="border-neutral-10 border-b px-5 py-3">
         <Breadcrumbs />
       </div>
-      <div className="px-10 py-6">
+      <div className="border-neutral-10 border-b px-10 py-6">
         <EpicOverview
           title="Communities protocol"
           description="Detecting keycard reader removal for the beginning of each flow"
           fullscreen
         />
-
-        <div role="separator" className="bg-neutral-10 -mx-6 my-6 h-px" />
-
+      </div>
+      <div className="border-neutral-10 border-b px-10 py-6">
         <TableIssues />
       </div>
     </div>