Adopt shared WebUI structural primitives

webui/src/styles/tasks.css

@@ -1,28 +1,3 @@
-.tasks-page {
-  box-sizing: border-box;
-  height: calc(100vh - 115px);
-  min-height: 0;
-  overflow: hidden;
-  color: var(--text);
-  background: var(--bg);
-}
-
-.tasks-page *,
-.tasks-page *::before,
-.tasks-page *::after {
-  box-sizing: border-box;
-}
-
-.tasks-shell {
-  height: 100%;
-  min-height: 0;
-  display: grid;
-  grid-template-columns: minmax(285px, 350px) minmax(0, 1fr);
-  border: var(--border-line);
-  background: var(--panel);
-  overflow: hidden;
-}
-
 .tasks-sidebar,
 .tasks-workspace {
   min-width: 0;
@@ -32,13 +7,6 @@
   overflow: hidden;
 }
 
-.tasks-sidebar {
-  border-right: var(--border-line);
-  background: var(--panel-soft);
-}
-
-.tasks-sidebar-bar,
-.tasks-topbar,
 .tasks-title,
 .tasks-detail-title,
 .tasks-toolbar-actions,
@@ -51,15 +19,6 @@
   gap: 8px;
 }
 
-.tasks-sidebar-bar,
-.tasks-topbar {
-  min-height: 54px;
-  justify-content: space-between;
-  border-bottom: var(--border-line);
-  background: var(--panel-header);
-  padding: 9px 12px;
-}
-
 .tasks-detail-title {
   min-width: 0;
 }
@@ -82,19 +41,7 @@
 }
 
 .tasks-search {
-  height: 36px;
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  border: var(--border-line);
-  border-radius: 5px;
-  background: var(--surface);
   margin: 8px 8px 0;
-  padding: 0 9px;
-}
-
-.tasks-search:focus-within {
-  border-color: var(--accent);
 }
 
 .tasks-search input {
@@ -232,22 +179,6 @@
   color: var(--muted);
 }
 
-.tasks-empty-detail {
-  min-height: 100%;
-  display: grid;
-  place-content: center;
-  justify-items: center;
-  color: var(--muted);
-  text-align: center;
-  padding: 24px;
-}
-
-.tasks-empty-detail h1 {
-  margin: 10px 0 0;
-  color: var(--text-strong);
-  font-size: 20px;
-}
-
 .tasks-create-form {
   width: min(620px, 75vw);
   display: grid;
@@ -275,10 +206,6 @@
 }
 
 @media (max-width: 820px) {
-  .tasks-shell {
-    grid-template-columns: minmax(230px, 42%) minmax(0, 1fr);
-  }
-
   .tasks-topbar {
     align-items: flex-start;
   }
@@ -289,16 +216,6 @@
 }
 
 @media (max-width: 620px) {
-  .tasks-shell {
-    grid-template-columns: 1fr;
-    grid-template-rows: minmax(250px, 44%) minmax(0, 1fr);
-  }
-
-  .tasks-sidebar {
-    border-right: 0;
-    border-bottom: var(--border-line);
-  }
-
   .tasks-create-form {
     width: min(100%, 88vw);
   }