From 063026bbd6d591d32efa339826dcb39a57ab576b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= <lindesvard@gmail.com>
Date: Thu, 15 Feb 2024 09:45:16 +0100
Subject: [PATCH] better widget navigation

---
 .../src/components/overview/overview-top-devices.tsx  |  2 +-
 .../src/components/overview/overview-top-events.tsx   |  2 +-
 apps/web/src/components/overview/overview-top-geo.tsx |  2 +-
 .../src/components/overview/overview-top-pages.tsx    |  2 +-
 .../src/components/overview/overview-top-sources.tsx  |  2 +-
 apps/web/src/components/overview/overview-widget.tsx  | 11 +++++++----
 6 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/components/overview/overview-top-devices.tsx b/apps/web/src/components/overview/overview-top-devices.tsx
index 525cee7f..2629fe70 100644
--- a/apps/web/src/components/overview/overview-top-devices.tsx
+++ b/apps/web/src/components/overview/overview-top-devices.tsx
@@ -171,7 +171,7 @@ export default function OverviewTopDevices({
   return (
     <>
       <Widget className="col-span-6 md:col-span-3">
-        <WidgetHead className="flex items-center justify-between">
+        <WidgetHead>
           <div className="title">{widget.title}</div>
           <WidgetButtons>
             {widgets.map((w) => (
diff --git a/apps/web/src/components/overview/overview-top-events.tsx b/apps/web/src/components/overview/overview-top-events.tsx
index b9ef4e5a..17e7dac5 100644
--- a/apps/web/src/components/overview/overview-top-events.tsx
+++ b/apps/web/src/components/overview/overview-top-events.tsx
@@ -59,7 +59,7 @@ export default function OverviewTopEvents({
   return (
     <>
       <Widget className="col-span-6 md:col-span-3">
-        <WidgetHead className="flex items-center justify-between">
+        <WidgetHead>
           <div className="title">{widget.title}</div>
           <WidgetButtons>
             {widgets.map((w) => (
diff --git a/apps/web/src/components/overview/overview-top-geo.tsx b/apps/web/src/components/overview/overview-top-geo.tsx
index b6bdd992..8e73f5b2 100644
--- a/apps/web/src/components/overview/overview-top-geo.tsx
+++ b/apps/web/src/components/overview/overview-top-geo.tsx
@@ -134,7 +134,7 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
   return (
     <>
       <Widget className="col-span-6 md:col-span-3">
-        <WidgetHead className="flex items-center justify-between">
+        <WidgetHead>
           <div className="title">{widget.title}</div>
           <WidgetButtons>
             {widgets.map((w) => (
diff --git a/apps/web/src/components/overview/overview-top-pages.tsx b/apps/web/src/components/overview/overview-top-pages.tsx
index 59b79c72..5599924f 100644
--- a/apps/web/src/components/overview/overview-top-pages.tsx
+++ b/apps/web/src/components/overview/overview-top-pages.tsx
@@ -105,7 +105,7 @@ export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
   return (
     <>
       <Widget className="col-span-6 md:col-span-3">
-        <WidgetHead className="flex items-center justify-between">
+        <WidgetHead>
           <div className="title">{widget.title}</div>
           <WidgetButtons>
             {widgets.map((w) => (
diff --git a/apps/web/src/components/overview/overview-top-sources.tsx b/apps/web/src/components/overview/overview-top-sources.tsx
index e798dd39..b232b804 100644
--- a/apps/web/src/components/overview/overview-top-sources.tsx
+++ b/apps/web/src/components/overview/overview-top-sources.tsx
@@ -260,7 +260,7 @@ export default function OverviewTopSources({
   return (
     <>
       <Widget className="col-span-6 md:col-span-3">
-        <WidgetHead className="flex items-center justify-between">
+        <WidgetHead>
           <div className="title">{widget.title}</div>
           <WidgetButtons>
             {widgets.map((w) => (
diff --git a/apps/web/src/components/overview/overview-widget.tsx b/apps/web/src/components/overview/overview-widget.tsx
index 92a8ba6a..041af62e 100644
--- a/apps/web/src/components/overview/overview-widget.tsx
+++ b/apps/web/src/components/overview/overview-widget.tsx
@@ -19,7 +19,10 @@ import { WidgetHead as WidgetHeadBase } from '../Widget';
 export function WidgetHead({ className, ...props }: WidgetHeadProps) {
   return (
     <WidgetHeadBase
-      className={cn('flex items-center justify-between', className)}
+      className={cn(
+        'flex flex-col p-0 [&_.title]:text-sm [&_.title]:px-4 [&_.title]:py-2',
+        className
+      )}
       {...props}
     />
   );
@@ -32,8 +35,8 @@ export function WidgetButtons({
 }: WidgetHeadProps) {
   const container = useRef<HTMLDivElement>(null);
   const sizes = useRef<number[]>([]);
-  const [slice, setSlice] = useState(-1);
-  const gap = 8;
+  const [slice, setSlice] = useState(3); // Show 3 buttons by default
+  const gap = 16;
 
   const handleResize = useThrottle(() => {
     if (container.current) {
@@ -82,7 +85,7 @@ export function WidgetButtons({
     <div
       ref={container}
       className={cn(
-        'flex-1 justify-end transition-opacity flex flex-wrap [&_button]:text-xs [&_button]:opacity-50 [&_button]:whitespace-nowrap [&_button.active]:opacity-100',
+        'px-4 self-stretch justify-start transition-opacity flex flex-wrap [&_button]:text-xs [&_button]:opacity-50 [&_button]:whitespace-nowrap [&_button.active]:opacity-100 [&_button.active]:border-b [&_button.active]:border-black [&_button]:py-1',
         className
       )}
       style={{ gap }}