chore: adjust style

1 files changed, 54 insertions, 18 deletions

diff --git a/src/components/ConnectionTable.module.scss b/src/components/ConnectionTable.module.scss
index 1a47c81..e8e3daf 100644
--- a/src/components/ConnectionTable.module.scss
+++ b/src/components/ConnectionTable.module.scss
@@ -1,6 +1,10 @@
 .tr {
   transition: all 0.2s ease;
   cursor: pointer;
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  min-width: fit-content;
 
   &:hover {
     // hover 作用到每个 td，避免 odd 行背景覆盖
@@ -16,25 +20,49 @@
 
 .th {
   height: 48px;
-  background: var(--color-background);
+  background: var(--bg-log-info-card);
   top: 0;
-  font-size: 0.85em;
+  font-size: 0.8em;
   font-weight: 600;
   user-select: none;
-  text-align: center;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   color: var(--color-text-secondary);
-  border-bottom: 2px solid var(--bg-near-transparent);
+  border-bottom: 2px solid var(--color-separator);
   position: sticky;
   z-index: 20;
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
+  padding: 0 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  flex-shrink: 0; // Ensure fixed width is respected
 
   &:hover {
     color: var(--color-text-highlight);
   }
 }
 
+.headerText {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cellText {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
+.sortIconContainer {
+  margin-left: 4px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.rotate180 {
+  transform: rotate(180deg);
+}
+
 .btnSection {
   button {
     margin-right: 15px;
@@ -49,15 +77,15 @@
 }
 
 .td {
-  padding: 12px 8px;
+  padding: 0 8px;
   font-size: 0.875em;
-  min-width: 9em;
   cursor: pointer;
-  text-align: left;
   vertical-align: middle;
   white-space: nowrap;
-  border-bottom: 1px solid var(--bg-near-transparent);
+  border-bottom: 1px solid var(--color-separator);
   transition: color 0.15s ease;
+  box-sizing: border-box;
+  flex-shrink: 0; // Ensure fixed width is respected
 
   &:hover {
     color: var(--color-text-highlight);
@@ -78,7 +106,7 @@
   border-collapse: separate;
   border-spacing: 0;
   width: 100%;
-  background: var(--color-background);
+  background: transparent;
 
   @media (max-width: 768px) {
     display: none;
@@ -86,11 +114,11 @@
 }
 
 .tableWrapper {
-  margin-top: 6px;
+  margin-top: 0;
   border-radius: 12px;
-  overflow: visible; // sticky 需要避免中间层成为 scroll container
-  background: var(--color-background);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  background: transparent;
+  box-shadow: none;
 
   @media (max-width: 768px) {
     background: transparent;
@@ -98,6 +126,14 @@
   }
 }
 
+.theadWrapper {
+  width: 100%;
+  overflow: hidden;
+  background: var(--bg-log-info-card);
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+}
+
 .cardsView {
   display: none;
 
@@ -112,7 +148,7 @@
   align-items: center;
   gap: 12px;
   padding: 0;
-  margin-bottom: 20px;
+  margin-bottom: 12px;
 }
 
 .sortSelectWrapper {
@@ -121,7 +157,7 @@
   gap: 10px;
   flex: 1;
   background: var(--color-bg-card);
-  padding: 10px 16px;
+  padding: 8px 12px;
   border-radius: 12px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
   color: var(--color-focus-blue);
@@ -166,8 +202,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 44px;
-  height: 44px;
+  width: 38px;
+  height: 38px;
   border-radius: 12px;
   cursor: pointer;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);