ux improve

app/static/style.css

@@ -7,9 +7,9 @@ body {
 }
 
 .container {
-    max-width: 840px;
-    margin: 48px auto;
-    padding: 24px;
+    max-width: 1100px;
+    margin: 28px auto;
+    padding: 20px;
     background: #fff;
     border-radius: 12px;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
@@ -17,6 +17,8 @@ body {
 
 h1 {
     margin-top: 0;
+    margin-bottom: 6px;
+    font-size: 1.9rem;
 }
 
 h2,
@@ -68,9 +70,11 @@ button:hover {
 }
 
 .top-nav {
-    margin-bottom: 24px;
+    margin-bottom: 18px;
     display: flex;
     gap: 16px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #e5e7eb;
 }
 
 .page-header,
@@ -84,16 +88,57 @@ button:hover {
 
 .stack {
     display: grid;
-    gap: 16px;
+    gap: 12px;
 }
 
 .card {
     border: 1px solid #ddd;
     border-radius: 10px;
-    padding: 16px;
+    padding: 14px;
     background: #fafafa;
 }
 
+.breadcrumb {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+    margin-bottom: 12px;
+    color: #666;
+    font-size: 0.95rem;
+}
+
+.type-tag {
+    display: inline-block;
+    width: fit-content;
+    padding: 3px 8px;
+    border-radius: 999px;
+    font-size: 0.78rem;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    margin-bottom: 8px;
+}
+
+.type-box {
+    background: #e6f0ff;
+    color: #0b57d0;
+}
+
+.type-item {
+    background: #eef7e8;
+    color: #2f6b1f;
+}
+
+.type-container {
+    background: #fff1da;
+    color: #9a4d00;
+}
+
+.type-subitem {
+    background: #f2ebff;
+    color: #6f42c1;
+}
+
 .search-form {
     display: flex;
     gap: 12px;
@@ -129,14 +174,86 @@ button:hover {
 
 .thumb-image {
     display: block;
-    width: 120px;
+    width: 88px;
     max-width: 100%;
     height: auto;
     border-radius: 8px;
-    margin-bottom: 12px;
+    margin-bottom: 0;
     border: 1px solid #ddd;
 }
 
+.compact-thumb {
+    flex: 0 0 88px;
+}
+
+.dense-list {
+    display: grid;
+    gap: 8px;
+}
+
+.compact-row {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    gap: 12px;
+    align-items: start;
+    padding: 10px 12px;
+    border: 1px solid #ddd;
+    border-radius: 10px;
+    background: #fafafa;
+}
+
+.compact-row-box {
+    grid-template-columns: 1fr auto;
+}
+
+.compact-row-container {
+    border-left: 4px solid #d98700;
+}
+
+.compact-row-item {
+    border-left: 4px solid #3d7a2a;
+}
+
+.compact-row-subitem {
+    border-left: 4px solid #7b57c2;
+}
+
+.compact-main h2,
+.compact-main h3 {
+    margin-bottom: 4px;
+}
+
+.row-title-line {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+    margin-bottom: 6px;
+}
+
+.row-meta-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: 4px 12px;
+    color: #555;
+    font-size: 0.95rem;
+}
+
+.row-note {
+    margin-top: 6px;
+    margin-bottom: 0;
+    color: #333;
+    font-size: 0.95rem;
+}
+
+.row-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    align-items: flex-end;
+    white-space: nowrap;
+}
+
 .meta,
 .muted {
     color: #666;
@@ -153,6 +270,44 @@ button:hover {
     margin: 0;
 }
 
+.checkbox-help {
+    margin-top: -4px;
+    color: #666;
+    font-size: 0.92rem;
+}
+
+.form-panel {
+    gap: 14px;
+}
+
+.form-field {
+    margin: 0;
+}
+
+.context-panel {
+    border: 1px solid #d9e2f2;
+    border-radius: 10px;
+    background: #f5f8fd;
+    padding: 12px;
+}
+
+.context-title {
+    font-weight: 700;
+    margin-bottom: 8px;
+}
+
+.context-body {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+    margin-bottom: 6px;
+}
+
+.context-body:last-child {
+    margin-bottom: 0;
+}
+
 .actions form {
     margin: 0;
 }
@@ -168,3 +323,27 @@ button:hover {
 .link-button:hover {
     text-decoration: underline;
 }
+
+@media (max-width: 720px) {
+    .container {
+        margin: 0;
+        border-radius: 0;
+        padding: 16px;
+    }
+
+    .compact-row,
+    .compact-row-box {
+        grid-template-columns: 1fr;
+    }
+
+    .row-actions {
+        align-items: flex-start;
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+
+    .thumb-image,
+    .compact-thumb {
+        width: 100px;
+    }
+}