feat(direct-tabs): spread DM/Channels/Bots tabs edge-to-edge and underline active segment with purple bar on the header's grey rule

src/app/pages/client/direct/DirectStreamHeader.tsx

@@ -24,7 +24,7 @@ const Segment = forwardRef<HTMLButtonElement, SegmentProps>(
       style={{
         appearance: 'none',
         border: 'none',
-        background: active ? color.Background.ContainerActive : 'transparent',
+        background: 'transparent',
         color: color.Background.OnContainer,
         opacity: disabled ? 0.45 : 1,
         cursor: disabled ? 'default' : 'pointer',
@@ -34,9 +34,26 @@ const Segment = forwardRef<HTMLButtonElement, SegmentProps>(
         fontWeight: active ? 600 : 500,
         fontSize: toRem(13),
         lineHeight: 1.2,
+        flex: 1,
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
       }}
     >
       {label}
+      {active && (
+        <span
+          style={{
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            bottom: `-${toRem(1)}`,
+            height: toRem(2),
+            backgroundColor: color.Primary.Main,
+          }}
+        />
+      )}
     </button>
   )
 );
@@ -54,8 +71,8 @@ export function DirectStreamHeader() {
   const navOpts = { replace: isNativePlatform() };
 
   return (
-    <PageNavHeader>
+    <PageNavHeader style={{ padding: 0 }}>
-      <Box alignItems="Center" grow="Yes" gap="100">
+      <Box alignItems="Stretch" grow="Yes" style={{ alignSelf: 'stretch' }}>
         <Segment
           active={!!directMatch}
           label={t('Direct.segment_dm')}