feat: add correct alignment for filters depending on breakpoint

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"

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>