Upd extension. Adjust styles.

browser-extension/assets/manifest.json

@@ -4,7 +4,7 @@
   "short_name": "Haskell Spotlight",
   "description": "Search on Hackage, Hoogle and more soon.",
   "homepage_url": "https://github.com/visortelle/hackage-ui",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "icons": { "192": "images/icon-192.png" },
   "content_scripts": [
     {
@@ -24,9 +24,5 @@
     "default_title": "Haskell title",
     "default_popup": "popup.html"
   },
-  "permissions": [
-    "storage",
-    "unlimitedStorage",
-    "webRequest"
-  ]
+  "permissions": ["storage", "unlimitedStorage", "webRequest"]
 }

browser-extension/content/Content.tsx

@@ -20,6 +20,7 @@ const Content = (props: { rootElement: HTMLElement }) => {
 
   const toggleVisibility = useCallback((event: KeyboardEvent) => {
     if (event.ctrlKey && event.key === 'h') {
+      event.preventDefault();
       setIsShow((isShow) => !isShow);
     }
   }, [isShow, setIsShow]);
@@ -27,6 +28,7 @@ const Content = (props: { rootElement: HTMLElement }) => {
   // Prevent global page hotkeys when the search input is in focus.
   const handleKeyboardEvents = useCallback((event: KeyboardEvent) => {
     if (event.key === 'Escape') {
+      event.preventDefault();
       setIsShow(false);
     }
 

hackage-ui/components/forms/SidebarButton.module.css

@@ -14,6 +14,7 @@
   font-size: 14rem;
   font-weight: bold;
   border-radius: 24rem;
+  line-height: 1;
 }
 
 .button:hover {