feat(web): inline toolbar with label sort, compact time, icon search

reaction_board/web/static/style.css

@@ -516,13 +516,15 @@ h1, h2, h3, p { margin: 0; }
 
 .rank-toolbar {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
+  overflow-x: auto;
+  scrollbar-width: none;
+  padding-bottom: 2px;
 }
-.rank-search { display: flex; flex: 0 0 auto; width: 230px; gap: 6px; }
-.rank-search .search-input { flex: 1 1 auto; min-width: 0; }
-.select-label {
+.rank-toolbar::-webkit-scrollbar { display: none; }
+.rank-toolbar .select-label {
   display: inline-flex;
   align-items: center;
   gap: 6px;
@@ -530,11 +532,38 @@ h1, h2, h3, p { margin: 0; }
   font-size: 12.5px;
   white-space: nowrap;
 }
-.rank-toolbar .select { max-width: 220px; width: auto; }
-@media (max-width: 619px) {
-  .rank-search { width: 230px; }
-  .rank-toolbar .select { max-width: 100%; }
+.rank-toolbar .select { max-width: 150px; min-width: 0; width: auto; }
+.rank-toolbar #rank-time { max-width: 128px; }
+.rank-search {
+  display: flex;
+  flex: 1 1 120px;
+  min-width: 96px;
+  margin-left: auto;
 }
+.search-box { position: relative; display: flex; align-items: center; width: 100%; }
+.search-box .search-input { width: 100%; padding-right: 34px; }
+.search-box .search-input::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+}
+.search-button {
+  position: absolute;
+  right: 2px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 34px;
+  height: 34px;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+}
+.search-button svg { width: 18px; height: 18px; }
+.search-button:hover { color: var(--accent); }
 .search-input, .select {
   min-height: 38px;
   padding: 8px 11px;