From 0dd6872af76ebeed5bae41cce1a7e734805f58d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C4=B0pek?= <yusufipek@protonmail.com>
Date: Sun, 5 Oct 2025 03:36:35 +0300
Subject: [PATCH] refactor: optimize dashboard layout and spacing

---
 client/app/globals.css | 32 ++++++++++++++++++--------------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/client/app/globals.css b/client/app/globals.css
index 7cc2568..a7ff14e 100644
--- a/client/app/globals.css
+++ b/client/app/globals.css
@@ -82,7 +82,9 @@ main {
   display: flex;
   flex-direction: column;
   height: 100vh;
-  overflow: hidden;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-bottom: 2rem;
   background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
 }
 
@@ -90,39 +92,40 @@ main {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 1.25rem clamp(1rem, 3vw, 2rem);
+  padding: 0.6rem clamp(0.75rem, 2.2vw, 1.25rem);
   background: rgba(15, 23, 42, 0.6);
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
 }
 
 .dashboard__title h1 {
-  font-size: 2rem;
-  margin: 0 0 0.5rem 0;
+  font-size: 1.4rem;
+  margin: 0;
   background: linear-gradient(135deg, #60a5fa, #a78bfa);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
+.dashboard__title .muted { font-size: 0.8rem; margin-top: 0.25rem; }
 
 .dashboard__status {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 0.5rem;
 }
 
 .dashboard__connect {
   flex: 1;
   display: flex;
   justify-content: center;
-  padding: 0 1rem;
+  padding: 0 0.5rem;
 }
 
 .message-count {
-  padding: 0.5rem 1rem;
+  padding: 0.35rem 0.75rem;
   background: rgba(255, 255, 255, 0.08);
   border-radius: 999px;
-  font-size: 0.9rem;
+  font-size: 0.8rem;
   font-weight: 600;
   color: #94a3b8;
 }
@@ -133,10 +136,10 @@ main {
   grid-template-columns: minmax(420px, 2.1fr) minmax(340px, 1.5fr);
   justify-content: center;
   align-items: stretch;
-  column-gap: 0.6rem;
+  column-gap: 0.1rem;
   row-gap: 3rem;
   align-content: start;
-  padding: 1rem clamp(1rem, 3vw, 2rem);
+  padding: 1rem clamp(1rem, 3vw, 3rem);
   width: 100%;
   max-width: 1400px;
   margin: 0 auto;
@@ -348,12 +351,12 @@ main {
 }
 
 .connectionControl--inline .connectionControl__input {
-  flex: 0 1 360px;
-  min-width: 240px;
+  flex: 0 1 320px;
+  min-width: 220px;
 }
 
 .connectionControl--inline .btn-connect {
-  padding: 0.6rem 1.1rem;
+  padding: 0.5rem 0.9rem;
 }
 
 .connectionControl--inline .connectionControl__connected {
@@ -363,7 +366,7 @@ main {
 
 .panel {
   background: rgba(30, 41, 59, 0.4);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.14);
   border-radius: 16px;
   padding: 1rem;
   backdrop-filter: blur(10px);
@@ -373,6 +376,7 @@ main {
   min-width: 0;
   max-width: 100%;
   height: 100%;
+  margin-bottom: 0.5rem;
   overflow: hidden;
 }