From d5a1ab7b0c1934f85352d5e7c1c18044267b238d Mon Sep 17 00:00:00 2001
From: Olivi <225673551+Olivi-9@users.noreply.github.com>
Date: Fri, 13 Mar 2026 09:22:34 +0800
Subject: fix(ui): prevent sidebar shrink / svg compression on Connections page
 Body: Add min-width:0 / flex-shrink:0 to flex containers so sidebar stays
 stable and the overview svg doesn’t get squashed when the connections toolbar
 expands.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Connections.module.scss | 6 ++++++
 src/components/SideBar.module.scss     | 9 +++++++++
 2 files changed, 15 insertions(+)

(limited to 'src/components')

diff --git a/src/components/Connections.module.scss b/src/components/Connections.module.scss
index e355f2b..0b117f4 100644
--- a/src/components/Connections.module.scss
+++ b/src/components/Connections.module.scss
@@ -30,6 +30,7 @@
 .inputWrapper {
   width: 100%;
   max-width: 200px;
+  min-width: 0;
   margin-left: auto;
 
   @media (max-width: 768px) {
@@ -137,6 +138,7 @@
   align-items: center;
   gap: 16px;
   width: 100%;
+  min-width: 0;
 
   @media (max-width: 768px) {
     display: grid;
@@ -150,6 +152,7 @@
   display: flex;
   align-items: center;
   gap: 16px;
+  min-width: 0;
 
   @media (max-width: 768px) {
     display: contents;
@@ -162,6 +165,7 @@
   display: flex;
   align-items: center;
   gap: 4px;
+  min-width: 0;
 
   @media (max-width: 768px) {
     grid-column: 1 / -1;
@@ -181,6 +185,7 @@
 .sourceSelect {
   width: auto;
   min-width: 120px;
+  flex-shrink: 0;
 
   @media (max-width: 768px) {
     width: 100% !important;
@@ -199,6 +204,7 @@
 
 .contentWrapper {
   margin: 0 45px 20px;
+  min-width: 0;
   background-color: var(--bg-log-info-card);
   border-radius: 12px;
   box-shadow: var(--shadow-card);
diff --git a/src/components/SideBar.module.scss b/src/components/SideBar.module.scss
index d927cb7..b2ba2ce 100644
--- a/src/components/SideBar.module.scss
+++ b/src/components/SideBar.module.scss
@@ -2,7 +2,15 @@
 
 .root {
   background: var(--color-bg-sidebar);
+  width: 180px;
+  min-width: 180px;
+  flex-shrink: 0;
   position: relative;
+
+  @media (max-width: 768px) {
+    width: 100%;
+    min-width: 0;
+  }
 }
 
 .logo_meta {
@@ -67,6 +75,7 @@
     color: var(--color-icon);
     width: 22px;
     height: 22px;
+    flex-shrink: 0;
 
     @media (--breakpoint-not-small) {
       width: 24px;
-- 
cgit v1.3.1