Adopt shared WebUI structural primitives

webui/src/styles/projects.css

@@ -1,36 +1,11 @@
-.projects-page,
-.projects-shell {
+.projects-page {
   height: 100%;
   min-height: 0;
   overflow: hidden;
 }
 
-.projects-shell {
-  display: flex;
-  flex-direction: column;
-  background: var(--surface);
-}
-
-.projects-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  min-height: 58px;
-  padding: 10px 16px;
-  border-bottom: 1px solid var(--border);
-  background: var(--surface-raised);
-}
-
 .projects-search {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: min(560px, 48vw);
-}
-
-.projects-search input {
-  min-width: 160px;
-  flex: 1;
+  flex: 1 1 560px;
 }
 
 .projects-kind-filter {
@@ -67,69 +42,6 @@
   background: var(--surface-subtle, var(--surface));
 }
 
-.projects-list {
-  overflow: hidden;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--surface-raised);
-}
-
-.project-row {
-  display: grid;
-  grid-template-columns: 28px minmax(0, 1fr) auto minmax(96px, auto);
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  min-height: 62px;
-  padding: 9px 12px;
-  border: 0;
-  border-bottom: 1px solid var(--border);
-  background: transparent;
-  color: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-
-.project-row:last-child {
-  border-bottom: 0;
-}
-
-.project-row:hover,
-.project-row:focus-visible,
-.project-row.is-selected {
-  background: var(--hover-bg);
-}
-
-.project-row.is-selected {
-  box-shadow: inset 3px 0 0 var(--accent);
-}
-
-.project-row-icon {
-  display: grid;
-  color: var(--text-soft);
-  place-items: center;
-}
-
-.project-row-main {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.project-row-main strong,
-.project-row-main small {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.project-row-main small,
-.project-row-date {
-  color: var(--text-soft);
-  font-size: 0.78rem;
-}
-
 .project-detail {
   width: min(100%, 980px);
   margin: 0 auto;
@@ -228,22 +140,10 @@
   font-size: 0.82rem;
 }
 
-.projects-empty {
-  padding: 36px 10px;
-  color: var(--text-soft);
-  text-align: center;
-}
-
 .project-editor-dialog {
   width: min(720px, calc(100vw - 32px));
 }
 
-.project-editor-form {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
-}
-
 .project-editor-form label {
   display: flex;
   min-width: 0;
@@ -256,20 +156,7 @@
   font-size: 0.8rem;
 }
 
-.project-editor-wide {
-  grid-column: 1 / -1;
-}
-
 @media (max-width: 920px) {
-  .projects-toolbar {
-    align-items: stretch;
-    flex-wrap: wrap;
-  }
-
-  .projects-search {
-    width: 100%;
-  }
-
   .projects-count {
     margin-left: 0;
   }
@@ -291,19 +178,4 @@
 }
 
 @media (max-width: 560px) {
-  .project-row {
-    grid-template-columns: 26px minmax(0, 1fr) auto;
-  }
-
-  .project-row-date {
-    display: none;
-  }
-
-  .project-editor-form {
-    grid-template-columns: 1fr;
-  }
-
-  .project-editor-wide {
-    grid-column: auto;
-  }
 }