From 39e76ddf86821094b1a73e78d83a5465d830701c Mon Sep 17 00:00:00 2001
From: sajeetharan <sajeefx@gmail.com>
Date: Sat, 15 Aug 2026 22:35:51 +0530
Subject: [PATCH] fix: keep developer actions out of globe view

---
 components/SearchBar.jsx | 60 ++++++++++++++++++++--------------------
 styles/main.css          | 31 ++++++++++-----------
 2 files changed, 44 insertions(+), 47 deletions(-)

diff --git a/components/SearchBar.jsx b/components/SearchBar.jsx
index 147991c..00bf3e5 100644
--- a/components/SearchBar.jsx
+++ b/components/SearchBar.jsx
@@ -189,6 +189,36 @@ export default function SearchBar({ developers, onResults, onReset, onGenerateCa
           <option value={20}>Top 20</option>
           <option value={50}>Top 50</option>
         </select>
+        <div className="search-bar__features" role="group" aria-label="Developer tools">
+          <button
+            type="button"
+            className="feature-action feature-action--card"
+            onClick={onOpenCardFeature}
+            aria-label="Generate identity card"
+            title="Generate identity card"
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <rect x="3" y="3" width="18" height="18" rx="2" />
+              <circle cx="8.5" cy="8.5" r="1.5" />
+              <path d="M21 15l-5-5L5 21" />
+            </svg>
+          </button>
+          <button
+            type="button"
+            className={`feature-action feature-action--compare${compareCount ? ' feature-action--active' : ''}`}
+            onClick={onOpenCompareFeature}
+            aria-label={`Compare contributions${compareCount ? `, ${compareCount} of 2 selected` : ''}`}
+            title="Compare contributions"
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <path d="M7 7h11l-3-3" />
+              <path d="M17 17H6l3 3" />
+              <path d="M18 7l-3 3" />
+              <path d="M6 17l3-3" />
+            </svg>
+            {compareCount > 0 && <strong>{compareCount}/2</strong>}
+          </button>
+        </div>
       </div>
       {resultCount !== null && query && (
         <div className="search-bar__feedback">
@@ -231,36 +261,6 @@ export default function SearchBar({ developers, onResults, onReset, onGenerateCa
           </button>
         ))}
       </div>
-      <div className="search-bar__features" role="group" aria-label="Developer tools">
-        <button
-          type="button"
-          className="feature-action feature-action--card"
-          onClick={onOpenCardFeature}
-          aria-label="Generate identity card"
-          title="Generate identity card"
-        >
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-            <rect x="3" y="3" width="18" height="18" rx="2" />
-            <circle cx="8.5" cy="8.5" r="1.5" />
-            <path d="M21 15l-5-5L5 21" />
-          </svg>
-        </button>
-        <button
-          type="button"
-          className={`feature-action feature-action--compare${compareCount ? ' feature-action--active' : ''}`}
-          onClick={onOpenCompareFeature}
-          aria-label={`Compare contributions${compareCount ? `, ${compareCount} of 2 selected` : ''}`}
-          title="Compare contributions"
-        >
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-            <path d="M7 7h11l-3-3" />
-            <path d="M17 17H6l3 3" />
-            <path d="M18 7l-3 3" />
-            <path d="M6 17l3-3" />
-          </svg>
-          {compareCount > 0 && <strong>{compareCount}/2</strong>}
-        </button>
-      </div>
     </div>
   );
 }
diff --git a/styles/main.css b/styles/main.css
index ee2e010..9767f20 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -448,18 +448,13 @@ body {
 }
 
 .search-bar__features {
-  position: absolute;
-  top: 0;
-  right: calc(100% + 12px);
   display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 5px;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  background: var(--bg-panel-90);
-  box-shadow: var(--shadow);
-  backdrop-filter: blur(16px);
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 2px;
+  margin-left: 2px;
+  padding-left: 8px;
+  border-left: 1px solid var(--border);
 }
 
 .feature-action {
@@ -503,6 +498,11 @@ body {
   transform: translateY(-1px);
 }
 
+.feature-action:focus-visible {
+  outline: 2px solid var(--accent-blue);
+  outline-offset: 1px;
+}
+
 .feature-action--card {
   color: #22d3ee;
 }
@@ -3136,12 +3136,6 @@ body {
     flex-wrap: wrap;
     justify-content: center;
   }
-  .search-bar__features {
-    top: calc(100% + 8px);
-    right: 0;
-    left: auto;
-    flex-direction: row;
-  }
   .header {
     padding: 0 12px;
   }
@@ -3348,6 +3342,9 @@ body {
   .header__brand {
     flex: 0 1 auto;
   }
+  .search-bar__inner select:last-of-type {
+    display: none;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {