Control ui adjsutments

ui/src/styles.css

@@ -156,6 +156,17 @@ button:active:not(:disabled) {
   transform: translateY(1px);
 }
 
+.button-with-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.45rem;
+}
+
+.button-with-icon svg {
+  flex: 0 0 auto;
+}
+
 button:disabled,
 input:disabled,
 select:disabled {
@@ -746,7 +757,7 @@ pre {
 .shader-picker__list {
   display: grid;
   gap: 0.45rem;
-  max-height: 250px;
+  max-height: min(52vh, 520px);
   overflow-y: auto;
   padding: 0.5rem;
   border: 1px solid var(--app-border);
@@ -754,22 +765,22 @@ pre {
 }
 
 .shader-picker__option {
-  width: 100%;
   display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
   gap: 0.25rem;
+  align-items: center;
   min-height: 4.25rem;
   padding: 0.65rem 0.75rem;
+  border: 1px solid var(--app-border);
   text-align: left;
   background: #182232;
-  border-color: var(--app-border);
-  align-content: start;
   line-height: 1.25;
 }
 
-.shader-picker__option--selected {
-  background: #203b54;
-  border-color: var(--app-primary);
-  box-shadow: inset 0 0 0 1px var(--app-primary-soft);
+.shader-picker__option-copy {
+  display: grid;
+  gap: 0.25rem;
+  min-width: 0;
 }
 
 .shader-picker__option--unavailable {
@@ -778,16 +789,16 @@ pre {
   opacity: 1;
 }
 
-.shader-picker__option:disabled {
-  cursor: not-allowed;
-  opacity: 1;
-}
-
 .shader-picker__option--unavailable .shader-picker__name,
 .shader-picker__option--unavailable .shader-picker__meta {
   color: #ffd0cf;
 }
 
+.shader-picker__add {
+  flex: 0 0 auto;
+  margin-left: 0.5rem;
+}
+
 .shader-picker__name,
 .shader-picker__meta {
   min-width: 0;
@@ -1040,6 +1051,11 @@ pre {
   min-height: 36px;
 }
 
+.toggle svg {
+  flex: 0 0 auto;
+  color: var(--app-muted);
+}
+
 .toggle--compact {
   min-height: auto;
 }