diff --git a/dashboard/package-lock.json b/dashboard/package-lock.json
index 9b87aac0..fd82b331 100644
--- a/dashboard/package-lock.json
+++ b/dashboard/package-lock.json
@@ -14,6 +14,7 @@
         "@fortawesome/free-regular-svg-icons": "^6.1.2",
         "@fortawesome/free-solid-svg-icons": "^6.1.2",
         "@fortawesome/react-fontawesome": "^0.2.0",
+        "@headlessui-float/react": "^0.14.0",
         "@headlessui/react": "^1.7.0",
         "@headlessui/tailwindcss": "^0.1.2",
         "@heroicons/react": "^2.0.16",
@@ -2307,6 +2308,54 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.2.tgz",
+      "integrity": "sha512-+2XpQV9LLZeanU4ZevzRnGFg2neDeKHgFLjP6YLW+tly0IvrhqT4u8enLGjLH3qeh85g19xY5rsAusfwTdn5lg==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.0"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.5.tgz",
+      "integrity": "sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==",
+      "dependencies": {
+        "@floating-ui/core": "^1.0.0",
+        "@floating-ui/utils": "^0.2.0"
+      }
+    },
+    "node_modules/@floating-ui/react": {
+      "version": "0.26.16",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.16.tgz",
+      "integrity": "sha512-HEf43zxZNAI/E781QIVpYSF3K2VH4TTYZpqecjdsFkjsaU1EbaWcM++kw0HXFffj7gDUcBFevX8s0rQGQpxkow==",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.0",
+        "@floating-ui/utils": "^0.2.0",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.0.tgz",
+      "integrity": "sha512-lNzj5EQmEKn5FFKc04+zasr09h/uX8RtJRNj5gUXsSQIXHVWTVh+hVAg1vOMCexkX8EgvemMvIFpQfkosnVNyA==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz",
+      "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw=="
+    },
     "node_modules/@fortawesome/fontawesome-common-types": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.1.tgz",
@@ -2379,6 +2428,21 @@
       "integrity": "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==",
       "dev": true
     },
+    "node_modules/@headlessui-float/react": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/@headlessui-float/react/-/react-0.14.0.tgz",
+      "integrity": "sha512-XD/hh/KeE5/SiV0cWplq94Yiikg9mDFreJRHU5F3XNnopEALghEk9YPj3lNfe5Xp5qcm8aq6P+k5zEZTrFS14g==",
+      "dependencies": {
+        "@floating-ui/core": "^1.5.3",
+        "@floating-ui/dom": "^1.5.4",
+        "@floating-ui/react": "^0.26.5"
+      },
+      "peerDependencies": {
+        "@headlessui/react": "^1.0.0",
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
     "node_modules/@headlessui/react": {
       "version": "1.7.9",
       "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.9.tgz",
@@ -27930,6 +27994,11 @@
       "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==",
       "dev": true
     },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+    },
     "node_modules/tailwind-merge": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.9.0.tgz",
diff --git a/dashboard/package.json b/dashboard/package.json
index a56c142f..05440f77 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -18,6 +18,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.1.2",
     "@fortawesome/free-solid-svg-icons": "^6.1.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@headlessui-float/react": "^0.14.0",
     "@headlessui/react": "^1.7.0",
     "@headlessui/tailwindcss": "^0.1.2",
     "@heroicons/react": "^2.0.16",
diff --git a/dashboard/src/components/Atoms/Config/SelectBox.tsx b/dashboard/src/components/Atoms/Config/SelectBox.tsx
index d87f8f1e..d52e24d1 100644
--- a/dashboard/src/components/Atoms/Config/SelectBox.tsx
+++ b/dashboard/src/components/Atoms/Config/SelectBox.tsx
@@ -5,6 +5,7 @@ import clsx from 'clsx';
 import { useEffect, useState, Fragment } from 'react';
 import BeatLoader from 'react-spinners/BeatLoader';
 import { catchAsyncToString } from 'utils/util';
+import { Float } from '@headlessui-float/react';
 
 /**
  * A self controlled dropdown meant to represent a single value of a config
@@ -117,12 +118,20 @@ export default function SelectBox({
           </div>
         )}
       </div>
-      <div className="relative w-5/12 shrink-0">
+      <div className="relative w-5/12 shrink-0" >
         <Listbox
           value={value}
           onChange={onChange}
           disabled={disabled || isLoading}
         >
+          <Float
+          as="div"
+          className="relative w-full"
+          placement="bottom"
+          floatingAs={Fragment}
+          portal
+          adaptiveWidth
+          >
           <Listbox.Button
             className={clsx(
               'input-outlines input-text-style group min-h-[1em] w-full rounded py-1.5 px-3',
@@ -150,57 +159,58 @@ export default function SelectBox({
             leaveFrom="opacity-100 translate-y-0"
             leaveTo="opacity-0 -translate-y-1"
           >
-            <Listbox.Options
-              className={clsx(
-                'input-outlines input-text-style absolute z-40 mt-2 max-h-[100%] w-full overflow-auto rounded p-0 py-1',
-                'bg-gray-850 outline-gray-550 drop-shadow-md focus-visible:ring-blue-faded/50'
-              )}
-            >
-              {options.map((option) => (
-                <Listbox.Option
-                  key={option}
-                  value={option}
-                  className={clsx(
-                    'relative cursor-pointer select-none py-2 pl-3 pr-4 text-gray-300',
-                    'border-t border-gray-faded/30 last:border-b ui-active:z-50 ui-active:mb-[-1px] ui-active:border-y ui-active:border-white/50 ui-active:last:mb-0',
-                    'ui-selected:font-medium ui-not-selected:font-medium',
-                    'ui-selected:ui-active:bg-gray-600 ui-not-selected:ui-active:bg-gray-800',
-                    'ui-selected:ui-not-active:bg-gray-700 ui-not-selected:ui-not-active:bg-gray-850'
-                  )}
-                >
-                  {({ active }) => (
-                    <div className="flex flex-row justify-between">
-                      <span className="block truncate pr-1">{option}</span>
-                      <div
-                        onClick={actionIconClick}
-                        className="absolute right-3"
-                      >
-                        {active && actionIcon && actionIconClick && (
-                          <FontAwesomeIcon
-                            key="icon"
-                            icon={actionIcon}
-                            className="w-4 cursor-pointer text-gray-faded/30 hover:text-gray-500"
-                          />
-                        )}
+              <Listbox.Options
+                className={clsx(
+                  'input-outlines input-text-style absolute z-40 mt-2 max-h-60 w-full overflow-auto rounded p-0 py-1',
+                  'bg-gray-850 outline-gray-550 drop-shadow-md focus-visible:ring-blue-faded/50'
+                )}
+              >
+                {options.map((option) => (
+                  <Listbox.Option
+                    key={option}
+                    value={option}
+                    className={clsx(
+                      'relative cursor-pointer select-none py-2 pl-3 pr-4 text-gray-300',
+                      'border-t border-gray-faded/30 last:border-b ui-active:z-50 ui-active:mb-[-1px] ui-active:border-y ui-active:border-white/50 ui-active:last:mb-0',
+                      'ui-selected:font-medium ui-not-selected:font-medium',
+                      'ui-selected:ui-active:bg-gray-600 ui-not-selected:ui-active:bg-gray-800',
+                      'ui-selected:ui-not-active:bg-gray-700 ui-not-selected:ui-not-active:bg-gray-850'
+                    )}
+                  >
+                    {({ active }) => (
+                      <div className="flex flex-row justify-between">
+                        <span className="block truncate pr-1">{option}</span>
+                        <div
+                          onClick={actionIconClick}
+                          className="absolute right-3"
+                        >
+                          {active && actionIcon && actionIconClick && (
+                            <FontAwesomeIcon
+                              key="icon"
+                              icon={actionIcon}
+                              className="w-4 cursor-pointer text-gray-faded/30 hover:text-gray-500"
+                            />
+                          )}
+                        </div>
                       </div>
-                    </div>
-                  )}
-                </Listbox.Option>
-              ))}
-              {(initialValue === undefined || initialValue.length === 0) && (
-                <Listbox.Option
-                  key={'Select...'}
-                  value={''}
-                  className={`relative cursor-default select-none bg-gray-700 py-2 pl-8 pr-4 text-gray-400`}
-                  disabled
-                >
-                  <span className={`block truncate font-medium`}>
-                    Select...
-                  </span>
-                </Listbox.Option>
-              )}
-            </Listbox.Options>
+                    )}
+                  </Listbox.Option>
+                ))}
+                {(initialValue === undefined || initialValue.length === 0) && (
+                  <Listbox.Option
+                    key={'Select...'}
+                    value={''}
+                    className={`relative cursor-default select-none bg-gray-700 py-2 pl-8 pr-4 text-gray-400`}
+                    disabled
+                  >
+                    <span className={`block truncate font-medium`}>
+                      Select...
+                    </span>
+                  </Listbox.Option>
+                )}
+              </Listbox.Options>
           </Transition>
+          </Float>
         </Listbox>
       </div>
     </div>
diff --git a/dashboard/src/pages/macros.tsx b/dashboard/src/pages/macros.tsx
index 6e2c4212..39db01b6 100644
--- a/dashboard/src/pages/macros.tsx
+++ b/dashboard/src/pages/macros.tsx
@@ -36,36 +36,39 @@ const MacroModalContents = ({
 }) => {
   const [macroData, _] = useState(data);
   return (
-    <span>
+    <div className={
+      clsx('flex flex-col gap-4 @4xl:flex-row', macroData.error? '' : 'mb-2')}>
+    <span className="w-full min-w-0 rounded-lg border border-gray-faded/30 child:w-full child:border-b child:border-gray-faded/30 first:child:rounded-t-lg last:child:rounded-b-lg last:child:border-b-0">
       {
         Object.entries(macroData.config).map(([_, manifest], index) => {
           return (<>
-            <SettingField 
-              key = {index} 
-              instance = {selectedInstance}
-              sectionId={`${selectedInstance.uuid}-${row.name}`}
-              settingId={manifest.setting_id}
-              setting={adaptSettingManifest(manifest)}
-              error = {null}
-              onSubmit={async (value) => {
-                const newSettings = macroData.config;
-                newSettings[`${manifest.name}`].value = value
-                await storeMacroConfig(
-                  selectedInstance.uuid,
-                  row.name as string,
-                  newSettings
-                );
-                macroData.error = null;
-
-              }}
-            />
-            <br></br>
+            <div >
+              <SettingField 
+                key = {index} 
+                instance = {selectedInstance}
+                sectionId={`${selectedInstance.uuid}-${row.name}`}
+                settingId={manifest.setting_id}
+                setting={adaptSettingManifest(manifest)}
+                error = {null}
+                onSubmit={async (value) => {
+                  const newSettings = macroData.config;
+                  newSettings[`${manifest.name}`].value = value
+                  await storeMacroConfig(
+                    selectedInstance.uuid,
+                    row.name as string,
+                    newSettings
+                  );
+                  macroData.error = null;
+                }}
+              /> 
+            </div>
           </>)
         })
       }
-      {macroData.error && <TextCaption text = {macroData.message || ''} className = 'text-small text-red-300 whitespace-pre-wrap'/>}
       
     </span>
+    {macroData.error && <TextCaption text = {macroData.message || ''} className = 'text-small text-red-300 whitespace-pre-wrap'/>}
+    </div>
   )
 }