feat: move to npm package & small fixes

src/styles/shell.css

@@ -53,12 +53,14 @@
   display: flex;
   flex-direction: column;
   min-height: 0;
+  overflow-x: hidden;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.22));
   border-right: 1px solid var(--hair);
 }
 .sb-scroll {
   flex: 1;
   min-height: 0; /* allow scroll inside the column flex so .sb-foot stays pinned */
+  overflow-x: hidden;
   overflow-y: auto;
   padding: 14px 12px 6px;
 }
@@ -90,6 +92,8 @@
   align-items: center;
   gap: 11px;
   width: 100%;
+  box-sizing: border-box;
+  min-width: 0;
   padding: 8px 10px;
   border-radius: var(--r-md);
   font-size: 14px;
@@ -107,6 +111,14 @@
 .nav-item .ph {
   font-size: 18px;
   color: var(--fg-3);
+  flex-shrink: 0;
+}
+.nav-item > span {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .nav-item:hover {
   background: rgba(255, 255, 255, 0.04);
@@ -150,6 +162,8 @@
   align-items: center;
   gap: 9px;
   width: 100%;
+  box-sizing: border-box;
+  min-width: 0;
   padding: 6px 10px;
   border-radius: var(--r-md);
   font-size: 13px;
@@ -263,9 +277,11 @@
 
 /* connection status pill (used in sidebar foot) */
 .conn {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   gap: 7px;
+  width: 100%;
+  box-sizing: border-box;
   padding: 5px 11px 5px 9px;
   border-radius: var(--r-pill);
   font-size: 12px;