From b34cea33880fad746cc33671273acf2468b54ceb Mon Sep 17 00:00:00 2001 From: Antti Kettunen Date: Sat, 2 May 2026 22:43:51 +0300 Subject: [PATCH] Make compact form controls the default - tighten the shared button and select primitives to the compact modal style - remove issues-page select overrides that no longer need to exist - drop the issue modal button sizing overrides so shared defaults handle the density --- webui/src/components/form/form.module.css | 16 +- .../issues/-ui/issue-detail-modal.module.css | 55 ------- .../routes/issues/-ui/issues-page.module.css | 145 ------------------ webui/src/routes/issues/-ui/issues-page.tsx | 2 - 4 files changed, 8 insertions(+), 210 deletions(-) diff --git a/webui/src/components/form/form.module.css b/webui/src/components/form/form.module.css index c2db90ef..bf673cac 100644 --- a/webui/src/components/form/form.module.css +++ b/webui/src/components/form/form.module.css @@ -74,7 +74,7 @@ width: auto; min-width: 130px; border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 12px; + border-radius: 10px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.035)), rgba(255, 255, 255, 0.05); @@ -93,9 +93,9 @@ 10px 6px; color: #fff; font: inherit; - font-size: 14px; + font-size: 13px; line-height: 1.5; - padding: 12px 34px 12px 14px; + padding: 8px 32px 8px 12px; transition: border-color 0.18s ease, background 0.18s ease, @@ -244,16 +244,16 @@ justify-content: center; gap: 8px; border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 12px; + border-radius: 10px; background: rgba(255, 255, 255, 0.05); color: #fff; cursor: pointer; font: inherit; - font-size: 14px; + font-size: 13px; font-weight: 600; line-height: 1.2; - min-height: 42px; - padding: 10px 16px; + min-height: 36px; + padding: 8px 12px; transition: transform 0.18s ease, border-color 0.18s ease, @@ -289,6 +289,6 @@ .formActions { display: flex; justify-content: flex-end; - gap: 12px; + gap: 8px; flex-wrap: wrap; } diff --git a/webui/src/routes/issues/-ui/issue-detail-modal.module.css b/webui/src/routes/issues/-ui/issue-detail-modal.module.css index d2f836ff..7348fa43 100644 --- a/webui/src/routes/issues/-ui/issue-detail-modal.module.css +++ b/webui/src/routes/issues/-ui/issue-detail-modal.module.css @@ -44,37 +44,6 @@ flex-wrap: wrap; } -.issuesFilterSelect { - background: rgba(255, 255, 255, 0.06); - border: 1px solid rgba(255, 255, 255, 0.1); - color: #fff; - padding: 7px 12px; - border-radius: 8px; - font-size: 13px; - cursor: pointer; - outline: none; - transition: border-color 0.2s; - appearance: none; - -webkit-appearance: none; - color-scheme: dark; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='%23888'%3E%3Cpath d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: right 10px center; - padding-right: 28px; - min-width: 130px; -} - -.issuesFilterSelect:focus { - border-color: rgba(var(--accent-light-rgb), 0.5); - box-shadow: 0 0 0 3px rgba(var(--accent-light-rgb), 0.12); -} - -.issuesFilterSelect option, -.issuesFilterSelect optgroup { - background: #1a1a2e; - color: #fff; -} - .issuesStats { display: flex; gap: 10px; @@ -648,24 +617,6 @@ margin-bottom: 14px; } -.issueActionDownload, -.issueActionWishlist, -.modalButtonSecondary, -.modalButtonPrimary, -.modalButtonProgress, -.modalButtonResolve, -.modalButtonDismiss, -.modalButtonReopen, -.modalButtonDelete { - min-height: auto; - padding: 8px 16px; - border: none; - border-radius: 8px; - font-size: 12px; - font-weight: 600; - line-height: 1.2; -} - .issueActionDownload { background: rgba(var(--accent-light-rgb), 0.12); color: rgb(var(--accent-light-rgb)); @@ -944,7 +895,6 @@ ); color: #08110b; border-color: transparent; - font-weight: 700; } .modalButtonProgress { @@ -1011,11 +961,6 @@ padding: 18px; } - .issuesFilterSelect { - min-width: 100%; - width: 100%; - } - .issuesStats { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); diff --git a/webui/src/routes/issues/-ui/issues-page.module.css b/webui/src/routes/issues/-ui/issues-page.module.css index 50813bfa..9fc1d269 100644 --- a/webui/src/routes/issues/-ui/issues-page.module.css +++ b/webui/src/routes/issues/-ui/issues-page.module.css @@ -44,10 +44,6 @@ flex-wrap: wrap; } -.issuesFilterSelect { - min-width: 130px; -} - .issuesStats { display: flex; gap: 10px; @@ -664,117 +660,6 @@ border-color: rgba(255, 165, 0, 0.35); } -.issueDetailResponseTextarea { - width: 100%; - background: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.1); - color: #fff; - padding: 10px 12px; - border-radius: 8px; - font-size: 13px; - outline: none; - resize: vertical; - min-height: 70px; - font-family: inherit; - transition: border-color 0.2s; - box-sizing: border-box; -} - -.issueDetailResponseTextarea:focus { - border-color: rgba(var(--accent-light-rgb), 0.5); -} - -.modalFooter { - display: flex; - justify-content: flex-end; - flex-wrap: wrap; - gap: 10px; - padding: 0 22px 22px; -} - -.modalButton { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 8px; - padding: 12px 16px; - border-radius: 14px; - border: 1px solid rgba(255, 255, 255, 0.08); - background: rgba(255, 255, 255, 0.05); - color: #fff; - cursor: pointer; - transition: all 0.2s ease; - font-family: inherit; -} - -.modalButton:hover:not(:disabled) { - background: rgba(255, 255, 255, 0.08); -} - -.modalButtonSecondary { - background: rgba(255, 255, 255, 0.04); -} - -.modalButtonPrimary { - background: linear-gradient( - 135deg, - rgba(var(--accent-rgb), 0.95), - rgba(var(--accent-light-rgb), 0.85) - ); - color: #08110b; - border-color: transparent; - font-weight: 700; -} - -.modalButtonDanger { - background: rgba(239, 68, 68, 0.14); - border-color: rgba(239, 68, 68, 0.28); - color: #ffd0d0; -} - -.modalButtonGhost { - background: rgba(255, 255, 255, 0.04); -} - -.modalButtonProgress { - background: rgba(77, 166, 255, 0.15); - color: #4da6ff; - border-color: rgba(77, 166, 255, 0.25); -} - -.modalButtonResolve { - background: rgba(74, 222, 128, 0.15); - color: #4ade80; - border-color: rgba(74, 222, 128, 0.25); -} - -.modalButtonDismiss { - background: rgba(239, 68, 68, 0.14); - color: #ffd0d0; - border-color: rgba(239, 68, 68, 0.28); -} - -.modalButtonReopen { - background: rgba(var(--accent-light-rgb), 0.15); - color: #fff; - border-color: rgba(var(--accent-light-rgb), 0.3); -} - -.modalButtonDelete { - background: rgba(239, 68, 68, 0.14); - color: #ffd0d0; - border-color: rgba(239, 68, 68, 0.28); -} - -.modalButtonDelete:hover:not(:disabled), -.modalButtonDanger:hover:not(:disabled), -.modalButtonProgress:hover:not(:disabled), -.modalButtonResolve:hover:not(:disabled), -.modalButtonDismiss:hover:not(:disabled), -.modalButtonReopen:hover:not(:disabled) { - filter: brightness(1.08); -} - @media (max-width: 900px) { .issuesStats { grid-template-columns: repeat(2, minmax(0, 1fr)); @@ -809,11 +694,6 @@ width: 100%; } - .issuesFilterSelect { - min-width: 100%; - width: 100%; - } - .issuesStats { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); @@ -842,29 +722,4 @@ flex-direction: row; justify-content: space-between; } - - .modal { - max-height: calc(100vh - 24px); - border-radius: 22px; - } - - .modalBody { - padding: 18px; - } - - .modalFooter { - padding: 0 18px 18px; - } - - .issueDetailMetaGrid { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .issueMetaValue { - max-width: 80px; - } - - .issueActionButtons { - justify-content: center; - } } diff --git a/webui/src/routes/issues/-ui/issues-page.tsx b/webui/src/routes/issues/-ui/issues-page.tsx index 2d90b0ef..5c1cce58 100644 --- a/webui/src/routes/issues/-ui/issues-page.tsx +++ b/webui/src/routes/issues/-ui/issues-page.tsx @@ -180,7 +180,6 @@ function IssueBoard({