[style] 반응형 레이아웃 정돈

자동 자가 개선 결과를 병합합니다.

Author: okorion

src/App.tsx

@@ -161,7 +161,11 @@ export default function App() {
                 const share = getActivityShare(bucket, allActivityCount)
 
                 return (
-                  <li key={bucket.kind} className={bucket.kind === selectedKind ? 'selected' : ''}>
+                  <li
+                    key={bucket.kind}
+                    className={bucket.kind === selectedKind ? 'selected' : ''}
+                    data-visible={isVisible}
+                  >
                     <label className="bucket-toggle">
                       <input
                         type="checkbox"
@@ -175,6 +179,9 @@ export default function App() {
                         <small>{share}%</small>
                       </span>
                       <span className="bucket-count">{bucket.count}</span>
+                      <span className="bucket-share-meter" aria-hidden="true">
+                        <span style={{ width: `${share}%`, backgroundColor: bucket.color }} />
+                      </span>
                     </label>
                     <button
                       className="inspect-button"

src/index.css

@@ -284,13 +284,15 @@ input:focus-visible {
   min-width: 0;
   display: grid;
   grid-template-columns: 16px 9px minmax(0, 1fr) auto;
-  gap: 10px;
+  column-gap: 10px;
+  row-gap: 5px;
   align-items: center;
   padding: 8px 4px 8px 12px;
   cursor: pointer;
 }
 
 .bucket-toggle input {
+  grid-row: 1 / 3;
   width: 16px;
   height: 16px;
   margin: 0;
@@ -302,6 +304,7 @@ input:focus-visible {
 }
 
 .bucket-swatch {
+  grid-row: 1 / 3;
   width: 9px;
   height: 9px;
   border-radius: 50%;
@@ -334,6 +337,33 @@ input:focus-visible {
   font-variant-numeric: tabular-nums;
 }
 
+.bucket-share-meter {
+  grid-row: 2;
+  grid-column: 3 / 5;
+  height: 3px;
+  overflow: hidden;
+  border-radius: var(--radius-pill);
+  background: color-mix(in srgb, var(--color-text) 8%, transparent);
+}
+
+.bucket-share-meter span {
+  display: block;
+  height: 100%;
+  min-width: 3px;
+  border-radius: inherit;
+  transition: opacity var(--motion-standard);
+}
+
+.bucket-list li[data-visible='false'] .bucket-swatch,
+.bucket-list li[data-visible='false'] .bucket-share-meter span {
+  opacity: 0.24;
+}
+
+.bucket-list li[data-visible='false'] .bucket-name,
+.bucket-list li[data-visible='false'] .bucket-count {
+  color: var(--color-subtle);
+}
+
 .inspect-button,
 .stage-actions button {
   display: inline-grid;