From b3441b68fd332ba3d1c2fa8ac867c8b8ad755e4a Mon Sep 17 00:00:00 2001
From: AustinMroz <austinmroz@utexas.edu>
Date: Tue, 24 Sep 2024 18:40:54 -0500
Subject: [PATCH] Reduce SearchBox margins for lower resolutions. (#959)

On lower screen widths, the SearchBox would scale itself down instead of
reducing the fairly wide margins. This wastes space and has reduces the
usability of the search box contents itself by cutting off information
(such as the experimental badge) on nodes with medium or longer titles

This is not without side effects, so further adjustments may be needed.
Currently, the searchbox is slightly offset to the right even for wide
screens and the adjustments are disabled for very small screens (<=768)
such that the preview is offscreen, but the entirety of the searchbox is
properly displayed down to 512
---
 src/components/searchbox/NodeSearchBoxPopover.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/searchbox/NodeSearchBoxPopover.vue b/src/components/searchbox/NodeSearchBoxPopover.vue
index 7e44ea39..f8ba60a8 100644
--- a/src/components/searchbox/NodeSearchBoxPopover.vue
+++ b/src/components/searchbox/NodeSearchBoxPopover.vue
@@ -226,12 +226,18 @@ onUnmounted(() => {
 
 <style>
 .invisible-dialog-root {
-  width: 30%;
+  width: 60%;
   min-width: 24rem;
   max-width: 48rem;
   border: 0 !important;
   background-color: transparent !important;
   margin-top: 25vh;
+  margin-left: 400px;
+}
+@media all and (max-width: 768px) {
+  .invisible-dialog-root {
+    margin-left: 0px;
+  }
 }
 
 .node-search-box-dialog-mask {