Fix UI issues: profile dropdown positioning, theme selector functionality, and blueprint shadow styling

Co-authored-by: 0xrinegade <[email protected]>

Author: Copilot

src/components/profile/ProfileSettings.js

@@ -238,38 +238,59 @@ const ProfileSettings = ({ settings, onSaveSettings }) => {
             <style jsx>{`
               .profile-theme-selector {
                 width: 100%;
-                background: var(--color-background);
-                border: 1px solid var(--color-border);
-                border-radius: 0;
+                background: var(--card-bg, var(--color-background));
+                border: 1px solid var(--border-color, var(--color-border));
+                border-radius: var(--border-radius, 0);
+                position: relative;
               }
               
-              .profile-theme-selector .app-header-control {
+              .profile-theme-selector .app-header-control,
+              .profile-theme-selector .app-dropdown-trigger {
                 width: 100%;
-                background: var(--color-background);
-                border: 1px solid var(--color-border);
-                color: var(--color-foreground);
+                background: var(--card-bg, var(--color-background));
+                border: 1px solid var(--border-color, var(--color-border));
+                color: var(--text-primary, var(--color-foreground));
                 padding: 8px 12px;
-                border-radius: 0;
-                font-family: inherit;
+                border-radius: var(--border-radius, 0);
+                font-family: var(--font-family, inherit);
                 font-size: 14px;
                 text-align: left;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
               }
               
-              .profile-theme-selector .app-dropdown-menu {
+              .profile-theme-selector .app-header-control:hover,
+              .profile-theme-selector .app-dropdown-trigger:hover {
+                background: var(--secondary-bg, var(--color-background-alt));
+                border-color: var(--accent-color, var(--color-primary));
+              }
+              
+              .profile-theme-selector .app-dropdown-menu,
+              .profile-theme-selector .theme-selector-menu {
                 width: 100%;
                 max-width: none;
                 left: 0 !important;
                 right: 0;
+                position: absolute;
+                top: 100%;
+                background: var(--card-bg, var(--color-background));
+                border: 1px solid var(--border-color, var(--color-border));
+                box-shadow: var(--shadow, 0 4px 6px rgba(0, 0, 0, 0.1));
+                z-index: 1000;
+                max-height: 200px;
+                overflow-y: auto;
               }
               
               .app-form-info {
-                background: var(--secondary-bg);
-                border: 1px solid var(--border-color);
+                background: var(--secondary-bg, var(--color-background-alt));
+                border: 1px solid var(--border-color, var(--color-border));
                 border-radius: var(--border-radius, 0px);
                 padding: 12px;
                 margin-top: 16px;
                 font-size: var(--font-size-sm, 12px);
-                color: var(--text-muted);
+                color: var(--text-muted, var(--color-foreground-muted));
               }
               
               .app-form-info p {

src/styles/ascii-theme.css

@@ -3319,6 +3319,14 @@ button:focus-visible {
   font-family: 'Courier New', Courier, monospace !important;
 }
 
+/* Blueprint theme specific dropdown positioning */
+.theme-blueprint .ascii-dropdown-menu {
+  /* Ensure dropdown always expands downward from navbar */
+  top: 100%;
+  bottom: auto;
+  transform: none;
+}
+
 /* Dropdown items */
 .ascii-dropdown-item {
   display: block;

src/styles/themes/blueprint.css

@@ -88,10 +88,10 @@
   --border-style: solid;
   --border-style-dashed: dashed;
   --border-style-dotted: dotted;
-  --shadow: 3px 3px 0px var(--border-color);
-  --shadow-hover: 5px 5px 0px var(--border-color);
+  --shadow: 0 0 8px rgba(30, 64, 175, 0.4), 3px 3px 0px var(--border-color);
+  --shadow-hover: 0 0 12px rgba(30, 64, 175, 0.6), 5px 5px 0px var(--border-color);
   --shadow-inset: inset 0 1px 3px rgba(30, 64, 175, 0.1);
-  --shadow-technical: 0 0 0 1px var(--border-color), 2px 2px 0 var(--border-light);
+  --shadow-technical: 0 0 6px rgba(30, 64, 175, 0.3), 0 0 0 1px var(--border-color), 2px 2px 0 var(--border-light);
 
   /* Blueprint Animation */
   --transition-fast: 0.15s ease;
@@ -516,6 +516,18 @@
   position: relative;
   padding: var(--spacing-4);
   z-index: 100;
+  /* Ensure dropdown always expands downward from navbar */
+  top: 100%;
+  bottom: auto;
+  transform: none;
+}
+
+/* Theme selector dropdown in blueprint theme */
+.theme-blueprint .app-dropdown-menu {
+  background: var(--card-bg);
+  border: var(--border-width-thick) solid var(--border-color);
+  box-shadow: var(--shadow-hover);
+  z-index: 100;
 }
 
 .theme-blueprint .ascii-dropdown-menu::before {
@@ -758,6 +770,7 @@
   min-width: 320px;
   max-height: 480px;
   overflow-y: auto;
+  box-shadow: var(--shadow-technical);
 }
 
 .theme-blueprint .theme-option-content {
@@ -783,6 +796,17 @@
   font-style: italic;
 }
 
+/* Profile settings theme selector specific styling */
+.theme-blueprint .profile-theme-selector .app-dropdown-trigger {
+  box-shadow: var(--shadow-technical);
+  border: var(--border-width-thick) solid var(--border-color);
+}
+
+.theme-blueprint .profile-theme-selector .app-dropdown-menu {
+  box-shadow: var(--shadow-hover);
+  border: var(--border-width-thick) solid var(--border-color);
+}
+
 /* Enhanced network indicator */
 .theme-blueprint .network-indicator {
   width: 12px;