From 269dcde5570b71a9069e564e0257a6e6ac2a7dc7 Mon Sep 17 00:00:00 2001
From: Danny Morabito <danny@arx-ccn.com>
Date: Tue, 25 Mar 2025 16:50:23 +0100
Subject: [PATCH] fix minor issue in dashboard style, and improve scrollbar
 style

---
 src/components/General/Button.ts |  2 +-
 src/routes/Home.ts               | 71 ++++++++++++++++++--------------
 src/routes/router.ts             | 37 ++++++++++++++---
 3 files changed, 72 insertions(+), 38 deletions(-)

diff --git a/src/components/General/Button.ts b/src/components/General/Button.ts
index 526ced6..a1a5a64 100644
--- a/src/components/General/Button.ts
+++ b/src/components/General/Button.ts
@@ -186,8 +186,8 @@ export class StyledButton extends LitElement {
   }
 
   private _handleClick(e: MouseEvent) {
+    e.preventDefault();
     if (this.disabled || this.loading) {
-      e.preventDefault();
       return;
     }
 
diff --git a/src/routes/Home.ts b/src/routes/Home.ts
index dc0736d..40787d9 100644
--- a/src/routes/Home.ts
+++ b/src/routes/Home.ts
@@ -5,10 +5,10 @@ import { customElement, state } from 'lit/decorators.js';
 import { map } from 'lit/directives/map.js';
 import { html, literal } from 'lit/static-html.js';
 
-import '@widgets/BitcoinBlockWidget';
 import '@components/AppGrid';
-import '@components/NostrAvatar';
 import '@components/General/Card';
+import '@components/NostrAvatar';
+import '@components/Widgets/BitcoinBlockWidget';
 
 @customElement('arx-eve-home')
 export class Home extends LitElement {
@@ -95,60 +95,71 @@ export class Home extends LitElement {
 
   static override styles = [
     css`
+      ::-webkit-scrollbar {
+        width: 12px;
+        height: 12px;
+      }
+
+      ::-webkit-scrollbar-track {
+        background: var(--color-base-200);
+        border-radius: var(--radius-field);
+      }
+
+      ::-webkit-scrollbar-thumb {
+        background: var(--color-base-300);
+        border-radius: var(--radius-field);
+        border: 2px solid var(--color-base-200);
+        transition: var(--transition);
+      }
+
+      ::-webkit-scrollbar-thumb:hover {
+        background: var(--color-neutral);
+      }
+
       .content-wrapper {
+        margin: auto;
+        height: 90vh;
+        overflow: hidden;
         display: flex;
+        align-items: center;
+        justify-content: center;
         gap: 20px;
         width: 100%;
         max-width: 1200px;
-        margin: auto;
-      }
-
-      .home {
-        min-height: calc(100vh - var(--font-2xl));
-        width: 100%;
-        position: absolute;
-        right: 0;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
       }
 
       .home-container {
         flex: 1;
         padding: 0;
+        height: auto;
       }
 
       .widgets-container {
+        height: 75vh;
+        overflow: auto;
         width: 350px;
-        display: flex;
-        flex-direction: column;
-        gap: 20px;
-
-        & > * {
-          flex: 1;
-        }
+        margin: 0 auto;
       }
 
       @media (max-width: 1024px) {
         .content-wrapper {
+          gap: 0;
+          height: auto;
           flex-direction: column;
         }
 
+        .home-container {
+          width: 100%;
+        }
+
         .widgets-container {
+          overflow: unset;
+          height: auto;
           width: calc(100vw - 40px);
-          flex-direction: row;
-          overflow-x: auto;
           padding-bottom: 10px;
         }
       }
 
-      @media (max-width: 768px) {
-        .widgets-container {
-          flex-direction: column;
-        }
-      }
-
       .welcome-section {
         display: flex;
         flex-direction: column;
@@ -173,7 +184,6 @@ export class Home extends LitElement {
 
   override render() {
     return html`
-      <div class="home">
         <div class="content-wrapper">
           <arx-card class="home-container">
             <arx-card class="welcome-section">
@@ -189,7 +199,6 @@ export class Home extends LitElement {
           </arx-card>
           <div class="widgets-container">
             ${map(this.widgets, (widget) => html`<arx-card><${widget.content}></${widget.content}></arx-card>`)}
-          </div>
         </div>
       </div>
     `;
diff --git a/src/routes/router.ts b/src/routes/router.ts
index 235a129..65f68e7 100644
--- a/src/routes/router.ts
+++ b/src/routes/router.ts
@@ -1,12 +1,12 @@
+import '@components/InitialSetup';
 import '@routes/404Page';
+import '@routes/Arbor/Home';
+import '@routes/Arbor/NewPost';
+import '@routes/Arbor/NewTopic';
+import '@routes/Arbor/TopicView';
 import '@routes/Home';
 import '@routes/Profile';
 import '@routes/Settings';
-import '@routes/Arbor/Home';
-import '@routes/Arbor/NewTopic';
-import '@routes/Arbor/TopicView';
-import '@routes/Arbor/NewPost';
-import '@components/InitialSetup';
 
 import { spread } from '@open-wc/lit-helpers';
 import { LitElement, css } from 'lit';
@@ -92,6 +92,27 @@ export default class EveRouter extends LitElement {
       overflow: hidden;
     }
 
+    ::-webkit-scrollbar {
+      width: 12px;
+      height: 12px;
+    }
+
+    ::-webkit-scrollbar-track {
+      background: var(--color-base-200);
+      border-radius: var(--radius-field);
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background: var(--color-base-300);
+      border-radius: var(--radius-field);
+      border: 2px solid var(--color-base-200);
+      transition: var(--transition);
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+      background: var(--color-neutral);
+    }
+
     .window {
       overflow: auto;
     }
@@ -103,6 +124,10 @@ export default class EveRouter extends LitElement {
       margin: 0 auto;
       padding: 1rem;
     }
+
+    .hide-overflow {
+      overflow: hidden;
+    }
   `;
 
   constructor() {
@@ -268,7 +293,7 @@ export default class EveRouter extends LitElement {
         @go-forward=${this.goForward}
         title="Eve"
       ></arx-header>
-      <div class="window">
+      <div class="window ${this.currentRoute.pattern === 'home' ? 'hide-overflow' : ''}">
         <div class="window-content">
           ${keyed(
             this.currentRoute.params,