Improve posts UI in three iterative passes

web/style.css

@@ -269,11 +269,12 @@ header {
 }
 
 .search-input {
-  padding: 6px 12px;
+  padding: 8px 38px 8px 12px;
   border: 1px solid #d1d5db;
   border-radius: 6px;
   font-size: 13px;
-  min-width: 200px;
+  min-width: 0;
+  width: 100%;
 }
 
 .search-input:focus {
@@ -282,6 +283,50 @@ header {
   box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
 }
 
+.search-field {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  min-width: 240px;
+}
+
+.search-field__label {
+  font-size: 12px;
+  font-weight: 700;
+  color: #475569;
+}
+
+.search-field__input-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.search-clear-btn {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 26px;
+  height: 26px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: #6b7280;
+  cursor: pointer;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.search-clear-btn:hover {
+  background: #e5e7eb;
+  color: #1f2937;
+}
+
+.search-clear-btn:focus-visible {
+  outline: 2px solid #1d4ed8;
+  outline-offset: 1px;
+}
+
 .switch {
   display: inline-flex;
   align-items: center;
@@ -530,6 +575,11 @@ h1 {
   background: #f8f9fa;
 }
 
+.tab-btn:focus-visible {
+  outline: 2px solid #1d4ed8;
+  outline-offset: 2px;
+}
+
 .tab-btn.active {
   background: #1877f2;
   color: white;
@@ -637,10 +687,27 @@ h1 {
 .bulk-status {
   font-size: 13px;
   color: #6b7280;
+  min-height: 32px;
+  display: inline-flex;
+  align-items: center;
+}
+
+.bulk-status--hint {
+  padding: 6px 12px;
+  border-radius: 999px;
+  border: 1px solid #c7d2fe;
+  background: #eef2ff;
+  color: #1e3a8a;
+  font-weight: 600;
 }
 
 .bulk-status--error {
-  color: #dc2626;
+  color: #991b1b;
+  border: 1px solid #fecaca;
+  background: #fee2e2;
+  border-radius: 999px;
+  padding: 6px 12px;
+  font-weight: 600;
 }
 
 .auto-open-overlay {
@@ -2189,6 +2256,19 @@ h1 {
     max-height: 75vh;
   }
 
+  .search-field {
+    min-width: 100%;
+  }
+
+  .bulk-actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .bulk-actions .btn {
+    width: 100%;
+  }
+
   .bookmark-section__list {
     gap: 5px;
   }
@@ -2354,6 +2434,46 @@ h1 {
     align-items: flex-start;
   }
 
+  .tabs-section {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+  }
+
+  .tabs {
+    width: 100%;
+  }
+
+  .tab-btn {
+    flex: 1 1 0;
+    text-align: center;
+  }
+
+  .search-container {
+    margin-left: 0;
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .search-field {
+    flex: 1 1 260px;
+  }
+
+  .posts-bulk-controls {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+
+  .bulk-actions {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .bulk-status {
+    width: 100%;
+  }
+
   .form-actions {
     flex-direction: column;
   }