From 33df3abbf454c6f6ce24f9173491a6cba20ad9dd Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sat, 15 Aug 2026 23:16:39 +0900
Subject: [PATCH] style(fe): remove redundant input styles - use PageLayout
 defaults

Removed duplicate input field styling from individual pages:
- ModelsList.vue: removed .input height/padding/border styles
- ShadowRunQueue.vue: removed .input height/padding/border styles
- ApprovalQueue.vue: removed .filters and .input styles

PageLayout now provides the authoritative source for input styling:
- All inputs in .ks-page__filters use consistent 34px height
- Padding: 0 0.75rem
- Border-radius: 4px
- Box-sizing: border-box

Individual pages now only define width constraints (max-width: 350px for search).

This applies the DRY principle - single source of truth for filter input
styling across all pages. Reduces code duplication and improves
maintainability.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 .../features/approval/pages/ApprovalQueue.vue  | 18 ------------------
 .../src/features/models/pages/ModelsList.vue   | 14 --------------
 .../shadow-run/pages/ShadowRunQueue.vue        | 14 --------------
 3 files changed, 46 deletions(-)

diff --git a/frontend/src/features/approval/pages/ApprovalQueue.vue b/frontend/src/features/approval/pages/ApprovalQueue.vue
index 762d1fb3..947e60f1 100644
--- a/frontend/src/features/approval/pages/ApprovalQueue.vue
+++ b/frontend/src/features/approval/pages/ApprovalQueue.vue
@@ -379,24 +379,6 @@ h3 {
   color: var(--color-text-primary);
 }
 
-.filters {
-  display: flex;
-  gap: var(--ks-space-3);
-}
-
-.input {
-  height: 34px;
-  padding: 0 0.75rem;
-  border: var(--border-width-1) solid var(--color-input-border);
-  border-radius: 4px;
-  background: var(--color-input-background);
-  color: var(--color-text-primary);
-  font-size: 13px;
-  font-family: var(--font-sans);
-  line-height: 34px;
-  box-sizing: border-box;
-  transition: all var(--transition-fast);
-}
 
 .input:focus, .textarea:focus {
   outline: none;
diff --git a/frontend/src/features/models/pages/ModelsList.vue b/frontend/src/features/models/pages/ModelsList.vue
index 0ebafc25..352dbdb0 100644
--- a/frontend/src/features/models/pages/ModelsList.vue
+++ b/frontend/src/features/models/pages/ModelsList.vue
@@ -189,20 +189,6 @@ function handleSearch() {
   gap: var(--kbx-spacing-md, 1rem);
 }
 
-.search-input,
-.status-select {
-  height: 34px;
-  padding: 0 0.75rem;
-  border: 1px solid var(--color-border-primary);
-  border-radius: 4px;
-  background-color: var(--color-background-primary);
-  color: var(--color-text-primary);
-  font-size: 13px;
-  font-family: inherit;
-  line-height: 34px;
-  box-sizing: border-box;
-}
-
 .search-input {
   min-width: 200px;
   max-width: 350px;
diff --git a/frontend/src/features/shadow-run/pages/ShadowRunQueue.vue b/frontend/src/features/shadow-run/pages/ShadowRunQueue.vue
index 88d0a0cc..3e22eb95 100644
--- a/frontend/src/features/shadow-run/pages/ShadowRunQueue.vue
+++ b/frontend/src/features/shadow-run/pages/ShadowRunQueue.vue
@@ -234,20 +234,6 @@ h1 {
   min-width: 150px;
 }
 
-.input {
-  height: 34px;
-  padding: 0 0.75rem;
-  border: var(--border-width-1) solid var(--color-input-border);
-  border-radius: 4px;
-  background: var(--color-input-background);
-  color: var(--color-text-primary);
-  font-size: 13px;
-  font-family: var(--font-sans);
-  line-height: 34px;
-  box-sizing: border-box;
-  transition: all var(--transition-fast);
-}
-
 .input:hover {
   border-color: var(--color-input-hover);
 }