Changeset 0.37.14 (#226)

Co-authored-by: gobha <jasafpro@gmail.com>
Co-committed-by: gobha <jasafpro@gmail.com>

src/css/primitives.css

@@ -472,3 +472,125 @@ select option { background: var(--bg-surface); color: var(--text); }
 .sw-tabs-content { flex: 1; min-height: 0; overflow: hidden; }
 .sw-tab-panel { height: 100%; overflow-y: auto; }
 
+/* ── Responsive: Mobile ───────────────────── */
+
+@media (max-width: 768px) {
+    /* Flyout items: larger touch targets */
+    .sw-menu-flyout .flyout-item {
+        padding: 10px 12px;
+        min-height: 44px;
+    }
+
+    /* Flyout: constrain to viewport */
+    .sw-menu-flyout {
+        max-width: calc(100vw - 16px);
+    }
+
+    /* Dialog/modal: full width on mobile, max with margins */
+    .sw-dialog__content {
+        width: calc(100vw - 32px);
+        max-width: 100%;
+        max-height: calc(100vh - 64px);
+    }
+
+    /* Toast: full width, centered */
+    .sw-toast {
+        max-width: calc(100vw - 32px);
+    }
+}
+
+/* ── User Picker (autocomplete) ──────────── */
+
+.sw-user-picker {
+    position: relative;
+}
+
+.sw-user-picker__input {
+    width: 100%;
+    padding: 8px 10px;
+    border-radius: var(--radius, 6px);
+    border: 1px solid var(--border, #2a2a2e);
+    background: var(--bg, #0e0e10);
+    color: var(--text, #eee);
+    font-size: 0.85em;
+}
+
+.sw-user-picker__input:focus {
+    outline: none;
+    border-color: var(--accent, #b38a4e);
+}
+
+.sw-user-picker__spinner {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 14px;
+    height: 14px;
+    border: 2px solid var(--border, #2a2a2e);
+    border-top-color: var(--accent, #b38a4e);
+    border-radius: 50%;
+    animation: sw-spin 0.6s linear infinite;
+}
+
+@keyframes sw-spin { to { transform: translateY(-50%) rotate(360deg); } }
+
+.sw-user-picker__dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    margin-top: 4px;
+    background: var(--bg-elevated, #2a2a2e);
+    border: 1px solid var(--border, #2a2a2e);
+    border-radius: var(--radius, 6px);
+    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
+    z-index: 300;
+    max-height: 240px;
+    overflow-y: auto;
+}
+
+.sw-user-picker__option {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 10px;
+    cursor: pointer;
+    transition: background 0.1s;
+}
+
+.sw-user-picker__option:hover,
+.sw-user-picker__option--active {
+    background: var(--bg-hover, rgba(255,255,255,0.06));
+}
+
+.sw-user-picker__avatar {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    background: var(--accent, #b38a4e);
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.7em;
+    font-weight: 600;
+    flex-shrink: 0;
+}
+
+.sw-user-picker__label {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.sw-user-picker__name {
+    font-size: 0.85em;
+    color: var(--text, #eee);
+}
+
+.sw-user-picker__handle {
+    font-size: 0.75em;
+    color: var(--text-muted, #888);
+}
+