some overlay ui improvements (#305)

* some overlay ui improvements * added height for approot
getsentry · Dec 27, 2023 · 60b1b69 · 60b1b69
1 parent b99ed75
commit 60b1b69
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 51 deletions.
diff --git a/.changeset/orange-points-dress.md b/.changeset/orange-points-dress.md
@@ -0,0 +1,5 @@
+---
+'@spotlightjs/overlay': patch
+---
+
+ui improvements
diff --git a/packages/overlay/src/components/Overview.tsx b/packages/overlay/src/components/Overview.tsx
@@ -49,23 +49,25 @@ export default function Overview({
   return (
     <>
       <Tabs tabs={tabs} setOpen={setOpen} />
-      <Routes>
-        <Route path="/not-found" element={<p>Not Found - How'd you manage to get here?</p>} key={'not-found'}></Route>
-        {tabs.map(tab => {
-          const TabContent = tab.content && tab.content;
+      <div className="flex-1 overflow-auto overflow-x-hidden">
+        <Routes>
+          <Route path="/not-found" element={<p>Not Found - How'd you manage to get here?</p>} key={'not-found'}></Route>
+          {tabs.map(tab => {
+            const TabContent = tab.content && tab.content;
 
-          if (TabContent) {
-            return (
-              <Route
-                path={`/${tab.id}/*`}
-                key={tab.id}
-                element={createElement(TabContent, { processedEvents: tab.processedEvents })}
-              ></Route>
-            );
-          }
-          return null;
-        })}
-      </Routes>
+            if (TabContent) {
+              return (
+                <Route
+                  path={`/${tab.id}/*`}
+                  key={tab.id}
+                  element={createElement(TabContent, { processedEvents: tab.processedEvents })}
+                ></Route>
+              );
+            }
+            return null;
+          })}
+        </Routes>
+      </div>
     </>
   );
 }
diff --git a/packages/overlay/src/components/Tabs.tsx b/packages/overlay/src/components/Tabs.tsx
@@ -52,7 +52,7 @@ export default function Tabs({ tabs, nested, setOpen }: Props) {
         <select
           id="tabs"
           name="tabs"
-          className="focus:border-primary-500 focus:ring-primary-500 block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:outline-none sm:text-sm"
+          className="border-primary-800 bg-primary-800 hover:bg-primary-700 hover:border-primary-700 focus:bg-primary-800 text-primary-100 block w-full rounded-md py-2 pl-3 pr-10 focus:outline-none sm:text-sm"
           onChange={e => {
             const activeTab = tabs.find(tab => tab.id === e.target.value);
             if (activeTab && activeTab.onSelect) {

diff --git a/packages/overlay/src/index.css b/packages/overlay/src/index.css
@@ -3,12 +3,12 @@
 @tailwind utilities;
 
 .spotlight-fullscreen-blur {
-  @apply fixed flex h-screen w-screen flex-col overflow-auto bg-black bg-opacity-50 backdrop-blur-sm backdrop-filter;
+  @apply fixed flex h-screen w-screen flex-col overflow-hidden bg-black bg-opacity-50 backdrop-blur-sm backdrop-filter;
   z-index: 999998;
 }
 
 .spotlight-debugger {
-  @apply from-primary-900 to-primary-950 flex h-full flex-col overflow-auto overflow-x-hidden rounded-lg bg-gradient-to-br to-20% font-sans text-white shadow-xl;
+  @apply from-primary-900 to-primary-950 flex h-full flex-col overflow-hidden rounded-lg bg-gradient-to-br to-20% font-sans text-white shadow-xl;
   margin: 2.5vh;
 }
 
@@ -20,30 +20,6 @@
   -webkit-app-region: no-drag;
 }
 
-/* .sentry-debugger .tree li {
-  position: relative;
-}
-.sentry-debugger .tree li > div > div {
-  position: relative;
-}
-
-.sentry-debugger .tree li .node::before {
-  @apply border-b-2 border-primary-400 border-l-2;
-
-  display: block;
-  left: -10px;
-  width: 10px;
-  content: "";
-  margin-top: -13px;
-  height: 15px;
-}
-
-.sentry-debugger .tree li:first-child .node::before {
-}
-
-.sentry-debugger .tree li:last-child .node::before {
-} */
-
 ul.tree {
   position: relative;
 }
@@ -107,11 +83,3 @@ ul.tree li:last-child:before {
 .table-values tbody td {
   @apply border-primary-950 border-y px-2 py-1;
 }
-
-/* 
-<th className="w-/12 text-left text-primary-300 font-normal font-mono pr-4 py-0.5">
-<div className="truncate w-full">{key}</div>
-</th>
-<td className="py-0.5">
-<pre className="whitespace-nowrap font-mono">{value}</pre>
-</td> */
diff --git a/packages/overlay/src/index.tsx b/packages/overlay/src/index.tsx
@@ -126,6 +126,7 @@ export async function init({
   if (fullPage) {
     docRoot.style.height = '100%';
     docRoot.style.backgroundColor = colors.indigo[950];
+    appRoot.style.height = 'inherit';
   } else {
     appRoot.style.position = 'absolute';
     appRoot.style.top = '0';