feat: 实现文件夹和书签的持久排序与拖拽功能

apps/web/src/style.css

@@ -31,6 +31,23 @@
 
 * { box-sizing: border-box; }
 
+html, body {
+  width: 100%;
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+/* Hide scrollbars but keep scrolling behavior */
+body {
+  -ms-overflow-style: none; /* IE/Edge legacy */
+  scrollbar-width: none; /* Firefox */
+}
+
+body::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
 body {
   margin: 0;
   min-width: 320px;
@@ -41,6 +58,9 @@ body {
 
 #app {
   min-height: 100vh;
+  width: 100%;
+  max-width: 100%;
+  overflow-x: hidden;
 }
 
 a {
@@ -137,6 +157,10 @@ input:focus-visible {
   width: 100%;
 }
 
+.bb-selectWrap.is-open {
+  z-index: 9999;
+}
+
 .bb-selectWrap--sm .bb-selectTrigger {
   padding: 8px 10px;
 }
@@ -182,7 +206,7 @@ input:focus-visible {
   top: calc(100% + 8px);
   left: 0;
   right: 0;
-  z-index: 50;
+  z-index: 10000;
   border-radius: 18px;
   padding: 6px;
   border: 1px solid rgba(255,255,255,0.65);
@@ -193,6 +217,14 @@ input:focus-visible {
   overflow: auto;
 }
 
+.bb-selectMenu--portal {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: auto;
+  z-index: 2147483000;
+}
+
 .bb-selectOption {
   width: 100%;
   border: 1px solid transparent;
@@ -226,7 +258,7 @@ input:focus-visible {
 }
 
 .bb-btn {
-  padding: 10px 12px;
+  padding: 8px 12px;
   border: 1px solid rgba(255,255,255,0.25);
   border-radius: 16px;
   background: linear-gradient(135deg, var(--bb-primary), var(--bb-cta));
@@ -235,6 +267,14 @@ input:focus-visible {
   transition: transform 120ms ease, filter 120ms ease, background 120ms ease;
 }
 
+.bb-oneLineEllipsis{
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
 .bb-btn:hover {
   filter: brightness(1.03);
 }
@@ -249,6 +289,50 @@ input:focus-visible {
   color: var(--bb-text);
 }
 
+/* Slightly stronger secondary background (better contrast on light cards) */
+.bb-btn--secondary.bb-btn--soft {
+  background: rgba(19, 78, 74, 0.10);
+  border-color: rgba(19, 78, 74, 0.16);
+}
+
+/* Bookmark title: single line with ellipsis */
+.bb-bookmarkTitle {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+/* When title sits in a flex row, allow it to shrink */
+.bb-bookmarkTitleRow {
+  flex: 1;
+  min-width: 0;
+}
+
+/* SortableJS: nicer drag visuals */
+.sortable-ghost {
+  opacity: 0.55;
+}
+
+.sortable-drag {
+  opacity: 0.98;
+  transform: rotate(0.4deg) scale(1.01);
+  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
+}
+
+/* "Pushed" neighbor feedback when swapping */
+.bb-sortPush {
+  transform: translateX(28px) translateY(-2px) scale(0.985);
+  transition: transform 220ms cubic-bezier(0.2, 0.9, 0.2, 1);
+}
+
+@media (max-width: 520px) {
+  .bb-sortPush {
+    transform: translateX(18px) translateY(-1px) scale(0.99);
+  }
+}
+
 .bb-btn--danger {
   border-color: #fecaca;
   background: #fee2e2;
@@ -267,6 +351,13 @@ input:focus-visible {
   padding: 12px;
   background: rgba(255,255,255,0.55);
   backdrop-filter: blur(12px);
+  max-width: 100%;
+  min-width: 0;
+}
+
+/* Avoid long content (e.g. URLs) forcing horizontal overflow */
+.bb-card > * {
+  min-width: 0;
 }
 
 .bb-card--interactive {