Fix search CSS override and shrink images down to correct width

src/components/Search.astro

@@ -1,6 +1,4 @@
 ---
-import '@styles/search.scss'
-
 export interface Props {
   readonly id?: string;
   readonly className?: string;
@@ -28,7 +26,7 @@ const bundlePath = `${import.meta.env.BASE_URL}pagefind/`;
   function initPageFind() {
     const allSelector = "[data-pagefind-ui]";
     for (const el of document.querySelectorAll(
-      `${allSelector}.pagefind-init`
+      `${allSelector}.pagefind-init`,
     )) {
       const elSelector = [
         ...(el.id ? [`#${el.id}`] : []),

src/styles/index.scss

@@ -13,16 +13,28 @@ a {
 }
 
 table {
-  font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, sans-serif;
-  border-collapse: collapse;
+    border-collapse: collapse;
-  width: 100%;
+    width: 100%;
-    td, th {
+
+    td,
+    th {
         border: 1px solid #111111;
         padding: 8px;
     }
-    tr:nth-child(odd){background-color: #333333;}
+
-    tr:nth-child(even){background-color: #141414;}
+    tr:nth-child(odd) {
-    tr:hover {background-color: #454545;}
+        background-color: #333333;
+    }
+
+    tr:nth-child(even) {
+        background-color: #141414;
+    }
+
+    tr:hover {
+        background-color: #454545;
+    }
+
     th {
         padding-top: 12px;
         padding-bottom: 12pqx;
@@ -38,6 +50,7 @@ blockquote {
     border-radius: 4px;
     padding: 12px 24px;
     border-left: 4px white solid;
+
     p {
         margin: 0px;
     }
@@ -51,22 +64,90 @@ header {
     top: 0px;
     left: 0px;
     z-index: 1;
+
     .header-content {
         max-width: 1200px;
         margin: auto;
         display: flex;
         align-items: center;
         justify-content: space-between;
+
         .header-start {
             display: flex;
             align-items: center;
             gap: 12px;
+
+            input {
+                background: #0a0a0a;
+                color: white;
+                border: 1px #2d2d2d solid;
+                border-radius: 6px;
+                padding: 12px 16px;
+                font-size: 14px;
+
+                &:focus {
+                    outline: none;
+                }
+            }
+
+            .pagefind-ui__result-image {
+                width: 100%;
+            }
+
+            mark {
+                background: gainsboro;
+                padding: 2px 4px;
+                border-radius: 4px;
+                margin: -2px -4px;
+            }
+
+            .pagefind-ui__message {
+                font-size: 18px;
+                font-weight: bold;
+            }
+
+            .pagefind-ui__results {
+                padding: 0px 18px;
+            }
+
+            .pagefind-ui__drawer {
+                position: absolute;
+                top: 79px;
+                max-width: 620px;
+                background: rgba(22, 22, 22, 0.75);
+                border-radius: 6px;
+                border: 1px #2d2d2d solid;
+                backdrop-filter: blur(24px);
+                padding: 12px 24px;
+            }
+
+            .pagefind-ui__search-clear,
+            .pagefind-ui__hidden {
+                display: none !important;
+            }
+
+            @media screen and (max-width: 916px) {
+                .pagefind-ui__drawer {
+                    left: 12px;
+                    width: 100%;
+                    max-width: calc(100% - 74px);
+                }
+            }
+
+            @media screen and (max-width: 650px) {
+                .pagefind-ui__drawer {
+                    top: 122px !important;
+                }
+            }
         }
+
         .header-end {
             display: flex;
             gap: 12px;
+
             a {
                 text-decoration: none;
+
                 &:hover {
                     text-decoration: underline;
                 }
@@ -78,38 +159,48 @@ header {
 .page {
     position: relative;
     min-height: 100vh;
+
     article {
         padding-top: 90px;
         display: flex;
         flex-direction: row;
         gap: 24px;
         padding-bottom: 80px;
+
         .sidebar {
             min-width: 250px;
             display: flex;
             flex-direction: column;
             gap: 12px;
+
             a {
                 text-decoration: none;
                 font-size: 14px;
                 color: #898989;
             }
         }
+
         .document {
             height: max-content;
-            img, video {
+
+            img,
+            video {
                 width: 100%;
                 border-radius: 6px;
             }
+
             .feelback-q {
                 justify-content: center;
                 padding: 24px 0px;
+
                 svg {
                     color: white;
                 }
+
                 .feelback-btn.active {
                     background: white;
                     border-radius: 3rem;
+
                     svg {
                         color: black;
                     }
@@ -117,6 +208,7 @@ header {
             }
         }
     }
+
     .footer {
         position: absolute;
         padding-bottom: 24px;
@@ -125,6 +217,7 @@ header {
         height: 2.5rem;
         display: flex;
         justify-content: space-between;
+
         .footer-end {
             display: flex;
             gap: 4px;
@@ -132,22 +225,26 @@ header {
     }
 }
 
-@media screen and (max-width: 775px){
+@media screen and (max-width: 775px) {
     .content {
         flex-direction: column !important;
     }
 }
-@media screen and (max-width: 650px){
+
+@media screen and (max-width: 650px) {
     .header-content {
         flex-direction: column;
         padding-bottom: 24px;
     }
+
     .page .content {
         padding-top: 114px !important;
     }
+
     .footer {
         flex-direction: column !important;
         align-items: center;
+
         * {
             margin: 0px;
         }

src/styles/search.scss

@@ -1,53 +0,0 @@
-input {
-    background: #0a0a0a;
-    color: white;
-    border: 1px #2d2d2d solid;
-    border-radius: 6px;
-    padding: 12px 16px;
-    font-size: 14px;
-    &:focus {
-        outline: none;
-    }
-}
-mark {
-    background: gainsboro;
-    padding: 2px 4px;
-    border-radius: 4px;
-    margin: -2px -4px;
-}
-
-.pagefind-ui__message {
-    font-size: 18px;
-    font-weight: bold;
-}
-.pagefind-ui__results {
-  padding: 0px 18px;
-}
-.pagefind-ui__drawer {
-    position: absolute;
-    top: 79px;
-    max-width: 620px;
-    background: rgba(22, 22, 22, 0.75);
-    border-radius: 6px;
-    border: 1px #2d2d2d solid;
-    backdrop-filter: blur(24px);
-    padding: 12px 24px;
-}
-
-.pagefind-ui__search-clear, .pagefind-ui__hidden {
-    display: none !important;
-}
-
-@media screen and (max-width: 916px){
-    .pagefind-ui__drawer {
-        left: 12px;
-        width: 100%;
-        max-width: calc(100% - 74px);
-    }
-}
-
-@media screen and (max-width: 650px){
-    .pagefind-ui__drawer {
-        top: 122px !important;
-    }
-}