diff --git a/app/auth-portal/src/pages/WorkspaceDetailsPage.vue b/app/auth-portal/src/pages/WorkspaceDetailsPage.vue
index 04a52ab650..30ce631d4a 100644
--- a/app/auth-portal/src/pages/WorkspaceDetailsPage.vue
+++ b/app/auth-portal/src/pages/WorkspaceDetailsPage.vue
@@ -111,7 +111,12 @@
             :requestStatus="
               createMode ? createWorkspaceReqStatus : editWorkspaceReqStatus
             "
-            class="basis-[calc(75%-0.5rem)] flex-grow-0"
+            :class="
+              clsx(
+                'basis-[calc(75%-0.5rem)]',
+                createMode ? 'flex-grow' : 'flex-grow-0',
+              )
+            "
             iconRight="chevron--right"
             tone="action"
             variant="solid"
diff --git a/app/web/src/App.vue b/app/web/src/App.vue
index bd467f1f61..00d956b2fc 100644
--- a/app/web/src/App.vue
+++ b/app/web/src/App.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 import "floating-vue/dist/style.css";
 
 import { tw } from "@si/vue-lib";
@@ -42,6 +42,7 @@ import { useAuthStore } from "./store/auth.store";
 import { useWorkspacesStore } from "./store/workspaces.store";
 import { useRealtimeStore } from "./store/realtime/realtime.store";
 import CachedAppNotification from "./components/CachedAppNotification.vue";
+import { APP_MINIMUM_WIDTH } from "./main";
 
 // this TS magic means that when you call Object.entries
 // the "key" will retain its type and will not just be defaulted to "string"
@@ -60,12 +61,32 @@ useCustomFontsLoadedProvider();
 // provides the root theme value to all children, and returns that root theme to use below
 const { theme: rootTheme } = useThemeContainer();
 
+// watch the window size to enforce minimum window width
+const windowWidth = ref(window.innerWidth);
+const windowSizeClasses = computed(() =>
+  windowWidth.value < APP_MINIMUM_WIDTH
+    ? `min-w-[${APP_MINIMUM_WIDTH}px] overflow-x-auto`
+    : "",
+);
+
+const windowResizeHandler = () => {
+  windowWidth.value = window.innerWidth;
+};
+
+onMounted(() => {
+  windowResizeHandler();
+  window.addEventListener("resize", windowResizeHandler);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", windowResizeHandler);
+});
+
 useHead(
   computed(() => ({
     bodyAttrs: {
       // add some base classes we need these type classes set for capsize plugin to work throughout
       // and add dark mode style/class
-      class: tw`font-sans text-base leading-none ${rootTheme.value}`,
+      class: tw`font-sans text-base leading-none ${rootTheme.value} ${windowSizeClasses.value}`,
     },
     htmlAttrs: {
       style: `color-scheme: ${rootTheme.value};`,
diff --git a/app/web/src/components/AssetCard.vue b/app/web/src/components/AssetCard.vue
index bc8ee353be..0c38ce51cb 100644
--- a/app/web/src/components/AssetCard.vue
+++ b/app/web/src/components/AssetCard.vue
@@ -107,7 +107,10 @@
       <p>
         Thanks for contributing! We will review your contribution, and reach out
         via email or on our
-        <a class="text-action-500" href="https://discord.com/invite/system-init"
+        <a
+          class="text-action-500"
+          href="https://discord.com/invite/system-init"
+          target="_blank"
           >Discord Server</a
         >
         if you have any questions.
diff --git a/app/web/src/components/AttributesPanel/TreeFormItem.vue b/app/web/src/components/AttributesPanel/TreeFormItem.vue
index 6d0a6b6231..128546fdbd 100644
--- a/app/web/src/components/AttributesPanel/TreeFormItem.vue
+++ b/app/web/src/components/AttributesPanel/TreeFormItem.vue
@@ -303,76 +303,39 @@
       :style="{ paddingLeft: indentPx }"
       class="flex flex-col gap-xs"
     >
-      <button
+      <DropdownMenuButton
         v-if="socketDropDownShouldBeShown"
         ref="socketConnectionDropdownButtonRef"
-        :class="
-          clsx(
-            'flex-grow p-2xs mb-[-1px] h-7 relative border mr-xs',
-            'font-mono text-[13px] text-left',
-            widgetOptions.length > 0
-              ? 'cursor-pointer'
-              : [
-                  'cursor-not-allowed',
-                  themeClasses(
-                    'text-neutral-500 bg-caution-lines-light',
-                    'text-neutral-400 bg-caution-lines-dark',
-                  ),
-                ],
-            isFocus
-              ? themeClasses(
-                  'border-action-500 bg-shade-0',
-                  'border-action-300 bg-shade-100',
-                )
-              : themeClasses(
-                  'border-neutral-400 bg-neutral-100',
-                  'border-neutral-600 bg-neutral-900',
-                ),
-          )
-        "
+        :placeholder="socketDropdownPlaceholder"
+        search
+        :searchFilters="socketSearchFilters"
+        :disabled="widgetOptions.length < 1"
+        class="mr-xs flex-grow"
         @blur="onBlur"
         @focus="widgetOptions.length > 0 ? onFocus() : null"
         @click="openSocketWidgetDropdownMenu"
       >
-        {{ socketDropdownPlaceholder }}
-        <Icon
-          class="absolute right-1 top-1 text-neutral-400 dark:text-neutral-600"
-          name="input-type-select"
-          size="sm"
+        <DropdownMenuItem
+          v-if="filteredSocketOptions.length === 0"
+          header
+          label="No sockets match your filter/search criteria."
         />
-        <DropdownMenu
-          ref="socketConnectionDropdownMenuRef"
-          :anchorTo="{ $el: socketConnectionDropdownButtonRef }"
-          overlapAnchorOnAnchorTo
-          matchWidthToAnchor
-          :overlapAnchorOffset="4"
-          search
-          :searchFilters="socketSearchFilters"
-          @search="onSearch"
-          @onClose="clearSearch"
+        <DropdownMenuItem
+          v-for="option in filteredSocketOptions"
+          :key="option.value"
+          @select="updateValue(option.value)"
         >
-          <DropdownMenuItem
-            v-if="filteredSocketOptions.length === 0"
-            header
-            label="No sockets match your filter/search criteria."
-          />
-          <DropdownMenuItem
-            v-for="option in filteredSocketOptions"
-            :key="option.value"
-            @select="updateValue(option.value)"
-          >
-            <div class="flex flex-row">
-              <TruncateWithTooltip class="basis-0 grow max-w-fit">{{
-                option.label
-              }}</TruncateWithTooltip>
-              <div class="flex-none">/</div>
-              <TruncateWithTooltip class="basis-0 grow max-w-fit">{{
-                option.label2
-              }}</TruncateWithTooltip>
-            </div>
-          </DropdownMenuItem>
-        </DropdownMenu>
-      </button>
+          <div class="flex flex-row">
+            <TruncateWithTooltip class="basis-0 grow max-w-fit">{{
+              option.label
+            }}</TruncateWithTooltip>
+            <div class="flex-none">/</div>
+            <TruncateWithTooltip class="basis-0 grow max-w-fit">{{
+              option.label2
+            }}</TruncateWithTooltip>
+          </div>
+        </DropdownMenuItem>
+      </DropdownMenuButton>
       <div
         v-for="connection in socketConnectionsList"
         :key="connection.value"
@@ -393,15 +356,16 @@
         <IconButton
           v-if="!connection.isInferred"
           icon="trash"
+          iconTone="destructive"
           size="sm"
-          class="flex-none"
+          class="flex-none ml-auto"
           @click="unsetHandler(connection.value)"
         />
         <IconButton
           v-else
           icon="question-circle"
           iconTone="neutral"
-          class="flex-none"
+          class="flex-none ml-auto"
           tooltip="Connection can't be unmade because it's inferred from a parent. You can override it above."
         />
       </div>
@@ -944,6 +908,7 @@ import {
   IconButton,
   Filter,
   TruncateWithTooltip,
+  DropdownMenuButton,
 } from "@si/vue-lib/design-system";
 import {
   AttributeTreeItem,
@@ -1625,30 +1590,25 @@ const socketDropDownShouldBeShown = computed(
     !(socketIsSingleArity.value && socketConnectionsList.value.length !== 0),
 );
 
-const socketConnectionDropdownButtonRef = ref();
-const socketConnectionDropdownMenuRef =
-  ref<InstanceType<typeof DropdownMenu>>();
+const socketConnectionDropdownButtonRef =
+  ref<InstanceType<typeof DropdownMenuButton>>();
 
 const openSocketWidgetDropdownMenu = () => {
   if (widgetOptions.value.length > 0) {
-    socketConnectionDropdownMenuRef.value?.open();
+    socketConnectionDropdownButtonRef.value?.open();
   }
 };
 
 // SOCKET WIDGET SEARCHING AND FILTERING
-const socketSearchString = ref("");
-const onSearch = (search: string) => {
-  socketSearchString.value = search.trim().toLocaleLowerCase();
-};
-const clearSearch = () => {
-  socketSearchString.value = "";
-};
+const socketSearchString = computed(
+  () => socketConnectionDropdownButtonRef.value?.searchString || "",
+);
 
 const filteredSocketOptions = computed(() => {
   const filteringActive =
-    socketConnectionDropdownMenuRef.value?.searchFilteringActive;
+    socketConnectionDropdownButtonRef.value?.searchFilteringActive;
   const activeFilters =
-    socketConnectionDropdownMenuRef.value?.searchActiveFilters;
+    socketConnectionDropdownButtonRef.value?.searchActiveFilters;
 
   if (socketSearchString.value === "" && !filteringActive) {
     return widgetOptions.value as DoubleLabelList<string>;
diff --git a/app/web/src/components/FuncEditor/FuncTestSelector.vue b/app/web/src/components/FuncEditor/FuncTestSelector.vue
index 9542d1894e..1937c05101 100644
--- a/app/web/src/components/FuncEditor/FuncTestSelector.vue
+++ b/app/web/src/components/FuncEditor/FuncTestSelector.vue
@@ -1,26 +1,25 @@
 <template>
-  <div class="flex flex-row items-center gap-sm">
-    <VormInput
+  <div class="flex flex-col items-center gap-xs">
+    <DropdownMenuButton
       v-model="selectedComponentId"
-      class="flex-grow"
-      type="dropdown"
+      class="w-full"
       placeholder="no component selected"
-      noLabel
       :options="componentAttributeOptions"
-      @update:model-value="loadInputIfNotAttributeFunc"
+      checkable
+      @select="setSelectedComponentId"
     />
-    <VormInput
+    <DropdownMenuButton
       v-if="isAttributeFunc"
       v-model="selectedPrototypeId"
-      class="flex-grow"
-      type="dropdown"
+      class="w-full"
       placeholder="no binding selected"
-      noLabel
-      :disabled="!selectedComponentId"
       :options="prototypeAttributeOptions"
-      @update:model-value="emit('loadInput')"
+      :disabled="!selectedComponentId"
+      checkable
+      @select="setSelectedBinding"
     />
     <VButton
+      class="w-full"
       label="Run Test"
       size="sm"
       :loading="testStatus === 'running'"
@@ -34,7 +33,7 @@
 </template>
 
 <script lang="ts" setup>
-import { VButton, VormInput } from "@si/vue-lib/design-system";
+import { DropdownMenuButton, VButton } from "@si/vue-lib/design-system";
 import { PropType, computed, ref } from "vue";
 import { useComponentsStore } from "@/store/components.store";
 import { useAssetStore } from "@/store/asset.store";
@@ -117,6 +116,16 @@ const prototypeAttributeOptions = computed(() => {
   }
 });
 
+const setSelectedComponentId = (id: string) => {
+  selectedComponentId.value = id;
+  loadInputIfNotAttributeFunc();
+};
+
+const setSelectedBinding = (id: string) => {
+  selectedPrototypeId.value = id;
+  emit("loadInput");
+};
+
 // We need the user to select a prototype after selecting a component if its an attribute func.
 const loadInputIfNotAttributeFunc = () => {
   if (props.isAttributeFunc) {
diff --git a/app/web/src/components/FuncEditor/ManagementDetails.vue b/app/web/src/components/FuncEditor/ManagementDetails.vue
index 5274db5f73..8978d38da4 100644
--- a/app/web/src/components/FuncEditor/ManagementDetails.vue
+++ b/app/web/src/components/FuncEditor/ManagementDetails.vue
@@ -1,37 +1,22 @@
 <template>
   <div class="p-xs flex flex-col gap-xs w-full">
-    <div class="flex flex-row gap-2xs">
-      <VormInput
-        :modelValue="selectedManagedSchemaId"
-        placeholder="Pick an asset to manage"
-        size="sm"
-        noLabel
-        placeholderSelectable
-        type="dropdown"
-        :disabled="props.disabled"
-        :options="schemaOptions"
-        @update:model-value="(newVal: string) => (selectedManagedSchemaId = newVal)"
-      />
-
-      <IconButton
-        icon="plus"
-        class="mt-2xs"
-        size="sm"
-        iconTone="action"
-        :disabled="props.disabled"
-        @click="addSchema"
-      />
-    </div>
-
-    <ul v-if="binding?.managedSchemas">
+    <DropdownMenuButton
+      placeholder="Pick an asset to manage"
+      :disabled="props.disabled"
+      :options="schemaOptions"
+      @select="addSchema"
+    />
+    <ul v-if="binding?.managedSchemas && binding.managedSchemas.length > 0">
       <li
         v-for="schemaId in binding.managedSchemas"
         :key="schemaId"
         class="flex flex-row items-center content-center gap-2xs mt-1"
       >
-        <p class="grow text-neutral-700 type-bold-sm dark:text-neutral-50 ml-2">
+        <TruncateWithTooltip
+          class="grow text-neutral-700 type-bold-sm dark:text-neutral-50 ml-2"
+        >
           {{ schemaNameMap[schemaId] ?? schemaId }}
-        </p>
+        </TruncateWithTooltip>
         <IconButton
           icon="trash"
           size="sm"
@@ -48,7 +33,11 @@
 import * as _ from "lodash-es";
 import { ref, watch, computed, toRaw } from "vue";
 import { storeToRefs } from "pinia";
-import { IconButton, VormInput } from "@si/vue-lib/design-system";
+import {
+  DropdownMenuButton,
+  IconButton,
+  TruncateWithTooltip,
+} from "@si/vue-lib/design-system";
 import { Option } from "@/components/SelectMenu.vue";
 import { toOptionValues } from "@/components/FuncEditor/utils";
 import { useFuncStore } from "@/store/func/funcs.store";
@@ -67,8 +56,6 @@ const props = defineProps<{
   disabled?: boolean;
 }>();
 
-const selectedManagedSchemaId = ref("");
-
 const schemaNameMap = ref<{ [key: string]: string }>({});
 
 const managerSchemaId = computed(
@@ -120,13 +107,13 @@ const schemaOptions = computed(() => {
   return filteredOptions;
 });
 
-const addSchema = async () => {
+const addSchema = async (selectedManagedSchemaId: string) => {
   if (binding.value) {
     const updated_binding = structuredClone(toRaw(binding.value));
     if (!updated_binding.managedSchemas) {
       updated_binding.managedSchemas = [];
     }
-    updated_binding.managedSchemas.push(selectedManagedSchemaId.value);
+    updated_binding.managedSchemas.push(selectedManagedSchemaId);
     await funcStore.UPDATE_BINDING(props.funcId, [updated_binding]);
   }
 };
diff --git a/app/web/src/components/ModelingDiagram/ModelingDiagram.vue b/app/web/src/components/ModelingDiagram/ModelingDiagram.vue
index 9041de9a32..5ee6a86398 100644
--- a/app/web/src/components/ModelingDiagram/ModelingDiagram.vue
+++ b/app/web/src/components/ModelingDiagram/ModelingDiagram.vue
@@ -4,7 +4,14 @@ overflow hidden */
 <template>
   <div
     :style="{
-      marginLeft: presenceStore.leftResizePanelWidth === 0 ? '0' : '230px', // related to left panel drawer
+      marginLeft:
+        presenceStore.leftResizePanelWidth === 0
+          ? '0'
+          : `${LEFT_PANEL_DRAWER_WIDTH}px`, // related to left panel drawer
+      marginRight:
+        presenceStore.rightResizePanelWidth === 0
+          ? '0'
+          : `${LEFT_PANEL_DRAWER_WIDTH}px`, // related to left panel drawer, balance the diagram
     }"
     class="grow h-full relative bg-neutral-50 dark:bg-neutral-900"
   >
@@ -361,6 +368,8 @@ import DiagramIcon from "./DiagramIcon.vue";
 import DiagramEmptyState from "./DiagramEmptyState.vue";
 import DiagramView from "./DiagramView.vue";
 
+const LEFT_PANEL_DRAWER_WIDTH = 230;
+
 const route = useRoute();
 const toast = useToast();
 
diff --git a/app/web/src/components/Workspace/WorkspaceModelAndView.vue b/app/web/src/components/Workspace/WorkspaceModelAndView.vue
index d4bb15ddf0..211abcd509 100644
--- a/app/web/src/components/Workspace/WorkspaceModelAndView.vue
+++ b/app/web/src/components/Workspace/WorkspaceModelAndView.vue
@@ -15,6 +15,7 @@
     <component
       :is="ResizablePanel"
       ref="leftResizablePanelRef"
+      :defaultSize="320"
       :minSize="250"
       rememberSizeKey="change-set-and-asset"
       side="left"
@@ -64,10 +65,11 @@
       :is="ResizablePanel"
       ref="rightResizablePanelRef"
       class="h-full"
-      :defaultSize="400"
+      :defaultSize="320"
       :minSize="320"
       rememberSizeKey="details-panel"
       side="right"
+      @sizeSet="rightPanelSize"
     >
       <div class="h-full overflow-hidden relative">
         <EdgeDetailsPanel
@@ -161,6 +163,10 @@ const leftPanelSize = (size: number) => {
   presenceStore.leftResizePanelWidth = size;
 };
 
+const rightPanelSize = (size: number) => {
+  presenceStore.rightResizePanelWidth = size;
+};
+
 const drawerLeftPos = computed(() => {
   if (!featureFlagsStore.OUTLINER_VIEWS) return 0;
   if (presenceStore.leftDrawerOpen) return 0;
diff --git a/app/web/src/components/WorkspaceImportModal.vue b/app/web/src/components/WorkspaceImportModal.vue
index 121e62f5f3..14a8c059cf 100644
--- a/app/web/src/components/WorkspaceImportModal.vue
+++ b/app/web/src/components/WorkspaceImportModal.vue
@@ -34,15 +34,9 @@
               required
               requiredMessage="Select a workspace to continue"
               type="dropdown"
-            >
-              <VormInputOption
-                v-for="item in exportsList"
-                :key="item.id"
-                :value="item.id"
-              >
-                {{ item.name }} ({{ item.createdAt }})
-              </VormInputOption>
-            </VormInput>
+              :disabled="workspaceImportOptions.length < 1"
+              :options="workspaceImportOptions"
+            />
           </template>
           <template v-else-if="loadExportsReqStatus.isPending">
             <VormInput label="Select workspace" type="container">
@@ -267,7 +261,6 @@ import {
   Stack,
   VButton,
   VormInput,
-  VormInputOption,
   useModal,
   useValidatedInputGroup,
 } from "@si/vue-lib/design-system";
@@ -456,5 +449,14 @@ const blockExit = computed(() => {
   );
 });
 
+const workspaceImportOptions = computed(() => {
+  if (!exportsList.value) return [];
+
+  return exportsList.value.map((item) => ({
+    value: item.id,
+    label: `${item.name} ${item.createdAt}`,
+  }));
+});
+
 defineExpose({ open, close });
 </script>
diff --git a/app/web/src/components/layout/navbar/ChangeSetPanel.vue b/app/web/src/components/layout/navbar/ChangeSetPanel.vue
index e7818eaf0c..ac106eb998 100644
--- a/app/web/src/components/layout/navbar/ChangeSetPanel.vue
+++ b/app/web/src/components/layout/navbar/ChangeSetPanel.vue
@@ -1,55 +1,72 @@
 <template>
-  <div>
-    <div class="flex gap-xs items-end">
-      <div>
-        <div
-          class="text-[11px] mt-[1px] mb-[5px] capsize font-medium text-neutral-300"
-        >
-          CHANGE SET:
-        </div>
-        <VormInput
-          ref="dropdownRef"
-          :modelValue="selectedChangeSetId"
-          :options="changeSetDropdownOptions"
-          class="flex-grow font-bold mb-[-1px]"
-          noLabel
-          placeholder="-- select a change set --"
-          size="xs"
-          type="dropdown"
-          @update:model-value="onSelectChangeSet"
-        />
+  <div class="flex flex-row gap-xs items-end flex-1 min-w-[172px] max-w-fit">
+    <label class="flex flex-col flex-1 min-w-0 max-w-fit">
+      <div
+        class="text-[11px] mt-[1px] mb-[5px] capsize font-medium text-neutral-300 whitespace-nowrap"
+      >
+        CHANGE SET:
       </div>
+      <DropdownMenuButton
+        ref="dropdownMenuRef"
+        v-model="selectedChangeSetId"
+        :options="changeSetSearchFilteredOptions"
+        :search="changeSetDropdownOptions.length > 20"
+        placeholder="-- select a change set --"
+        checkable
+        variant="navbar"
+        @select="onSelectChangeSet"
+      >
+        <template #afterOptions>
+          <DropdownMenuItem
+            label="Create New Change Set"
+            icon="plus"
+            disableCheckable
+            @select="
+              () => {
+                onSelectChangeSet('NEW');
+              }
+            "
+          />
+        </template>
+        <DropdownMenuItem
+          v-if="changeSetSearchFilteredOptions.length === 0"
+          label="No Change Sets Match Your Search"
+          header
+        />
+      </DropdownMenuButton>
+    </label>
+
+    <VButton
+      v-tooltip="{
+        content: 'Create Change Set',
+      }"
+      icon="git-branch-plus"
+      size="sm"
+      tone="action"
+      variant="ghost"
+      class="flex-none"
+      @click="openCreateModal"
+    />
 
-      <VButton
-        v-tooltip="{
-          content: 'Create Change Set',
-        }"
-        icon="git-branch-plus"
-        size="sm"
-        tone="action"
-        variant="ghost"
-        @click="openCreateModal"
-      />
-
-      <VButton
-        v-tooltip="{
-          content: 'Abandon Change Set',
-        }"
-        :disabled="
-          !selectedChangeSetName ||
-          changeSetsStore.headSelected ||
-          changeSetsStore.creatingChangeSet ||
-          (featureFlagsStore.REBAC &&
-            changeSetsStore.selectedChangeSet?.status ===
-              ChangeSetStatus.NeedsApproval)
-        "
-        icon="trash"
-        size="sm"
-        tone="action"
-        variant="ghost"
-        @click="openApprovalFlowModal"
-      />
-    </div>
+    <VButton
+      v-tooltip="{
+        content: 'Abandon Change Set',
+      }"
+      :disabled="
+        !selectedChangeSetName ||
+        changeSetsStore.headSelected ||
+        changeSetsStore.creatingChangeSet ||
+        (featureFlagsStore.REBAC &&
+          changeSetsStore.selectedChangeSet?.status ===
+            ChangeSetStatus.NeedsApproval)
+      "
+      icon="trash"
+      size="sm"
+      tone="action"
+      variant="ghost"
+      class="flex-none"
+      @click="openApprovalFlowModal"
+    />
 
     <Modal ref="createModalRef" title="Create Change Set">
       <form @submit.prevent="onCreateChangeSet">
@@ -71,6 +88,7 @@
             regexMessage="You cannot name a change set 'HEAD' - please choose another name."
             required
             requiredMessage="Please choose a name for your change set!"
+            @enterPressed="onCreateChangeSet"
           />
           <div class="flex flex-row-reverse gap-sm">
             <VButton
@@ -87,7 +105,6 @@
         </Stack>
       </form>
     </Modal>
-
     <ApprovalFlowModal
       ref="approvalFlowModalRef"
       votingKind="abandon"
@@ -107,6 +124,8 @@ import {
   Stack,
   Modal,
   useValidatedInputGroup,
+  DropdownMenuButton,
+  DropdownMenuItem,
 } from "@si/vue-lib/design-system";
 import { useChangeSetsStore } from "@/store/change_sets.store";
 import { ChangeSetStatus } from "@/api/sdf/dal/change_set";
@@ -118,7 +137,6 @@ import { useFeatureFlagsStore } from "@/store/feature_flags.store";
 const CHANGE_SET_NAME_REGEX = /^(?!head).*$/i;
 
 const featureFlagsStore = useFeatureFlagsStore();
-const dropdownRef = ref();
 const authStore = useAuthStore();
 const changeSetsStore = useChangeSetsStore();
 const openChangeSets = computed(() => changeSetsStore.openChangeSets);
@@ -127,11 +145,28 @@ const selectedChangeSetName = computed(
   () => changeSetsStore.selectedChangeSet?.name,
 );
 
+const dropdownMenuRef = ref<InstanceType<typeof DropdownMenuButton>>();
+
 const changeSetDropdownOptions = computed(() => {
-  return [
+  const options = [
     ..._.map(openChangeSets.value, (cs) => ({ value: cs.id, label: cs.name })),
-    { value: "NEW", label: "+ Create new change set" },
+    // { value: "NEW", label: "+ Create new change set" },
   ];
+  return options;
+});
+
+const changeSetSearchFilteredOptions = computed(() => {
+  const searchString = dropdownMenuRef.value?.searchString;
+
+  if (!searchString || searchString === "") {
+    return changeSetDropdownOptions.value;
+  }
+
+  return changeSetDropdownOptions.value.filter(
+    (option) =>
+      option.label.toLocaleLowerCase().includes(searchString) ||
+      option.value.toLocaleLowerCase().includes(searchString),
+  );
 });
 
 const router = useRouter();
@@ -219,7 +254,6 @@ async function onCreateChangeSet() {
   const createReq = await changeSetsStore.CREATE_CHANGE_SET(
     createChangeSetName.value,
   );
-  createChangeSetName.value = changeSetsStore.getGeneratedChangesetName();
 
   if (createReq.result.success) {
     // reusing above to navigate to new change set... will probably clean this all up later
diff --git a/app/web/src/components/layout/navbar/Collaborators.vue b/app/web/src/components/layout/navbar/Collaborators.vue
index b05a82fb2a..146d19cd91 100644
--- a/app/web/src/components/layout/navbar/Collaborators.vue
+++ b/app/web/src/components/layout/navbar/Collaborators.vue
@@ -49,7 +49,7 @@
         @click="openMoreUsersPopover"
       >
         <div class="text-center w-full font-bold">
-          <template v-if="moreUsersNumber < 10000"
+          <template v-if="moreUsersNumber < 100"
             >+{{ moreUsersNumber }}</template
           >
           <template v-else>+</template>
@@ -121,7 +121,17 @@ export type UserInfo = {
 const moreUsersPopoverRef = ref();
 const moreUsersButtonRef = ref();
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const testUsers = (amount = 10) => {
+  return Array.from(Array(amount).keys()).map((i) => ({
+    name: `test user ${i}`,
+  }));
+};
+
 const users = computed<UserInfo[]>(() => {
+  // Uncomment this line when you need to see users in the Collaborators widget for testing
+  // return testUsers();
+
   const list = [] as UserInfo[];
   for (const user of _.values(presenceStore.usersById)) {
     list.push({
@@ -217,7 +227,6 @@ const moreUsersTooltip = computed(() => {
 });
 
 const width = computed(() => {
-  windowResizeHandler();
   if (showOneIcon.value || sortedUsers.value.length === 1) {
     return "w-8";
   } else if (sortedUsers.value.length < 3) {
@@ -233,23 +242,22 @@ const openMoreUsersPopover = () => {
   moreUsersPopoverRef.value.open();
 };
 
-const showOneIcon = ref(false);
+const windowWidth = ref(window.innerWidth);
 
 const windowResizeHandler = () => {
-  if (window.innerWidth < 900) {
-    showOneIcon.value = true;
-  } else {
-    showOneIcon.value = false;
-  }
+  windowWidth.value = window.innerWidth;
 };
 
 onMounted(() => {
+  windowResizeHandler();
   window.addEventListener("resize", windowResizeHandler);
 });
 onBeforeUnmount(() => {
   window.removeEventListener("resize", windowResizeHandler);
 });
 
+const showOneIcon = computed(() => windowWidth.value < 700);
+
 const filterString = ref("");
 const filterStringCleaned = computed(() => {
   if (!moreUsersPopoverRef.value.isOpen) return "";
diff --git a/app/web/src/components/layout/navbar/Navbar.vue b/app/web/src/components/layout/navbar/Navbar.vue
index 3128bca709..c2a1b75772 100644
--- a/app/web/src/components/layout/navbar/Navbar.vue
+++ b/app/web/src/components/layout/navbar/Navbar.vue
@@ -1,6 +1,12 @@
 <template>
   <nav
-    class="navbar bg-neutral-900 text-white relative shadow-[0_4px_4px_0_rgba(0,0,0,0.15)] z-90 h-[60px] overflow-hidden shrink-0 flex gap-sm select-none"
+    :class="
+      clsx(
+        'navbar bg-neutral-900 text-white relative shadow-[0_4px_4px_0_rgba(0,0,0,0.15)]',
+        'z-90 h-[60px] overflow-hidden shrink-0 flex flex-row justify-between select-none',
+        windowWidth > 700 && 'gap-sm',
+      )
+    "
   >
     <!-- Left side -->
     <NavbarPanelLeft />
@@ -15,12 +21,28 @@
 
 <script setup lang="ts">
 import { useThemeContainer } from "@si/vue-lib/design-system";
+import clsx from "clsx";
+import { onBeforeUnmount, onMounted, ref } from "vue";
 import NavbarPanelCenter from "./NavbarPanelCenter.vue";
 import NavbarPanelRight from "./NavbarPanelRight.vue";
 import NavbarPanelLeft from "./NavbarPanelLeft.vue";
 
 // top bar is always dark, so this keeps the workspace and change set dropdowns looking correct
 useThemeContainer("dark");
+
+const windowWidth = ref(window.innerWidth);
+
+const windowResizeHandler = () => {
+  windowWidth.value = window.innerWidth;
+};
+
+onMounted(() => {
+  windowResizeHandler();
+  window.addEventListener("resize", windowResizeHandler);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", windowResizeHandler);
+});
 </script>
 
 <style lang="less">
diff --git a/app/web/src/components/layout/navbar/NavbarPanelCenter.vue b/app/web/src/components/layout/navbar/NavbarPanelCenter.vue
index bfbdf913fd..bb60042d8b 100644
--- a/app/web/src/components/layout/navbar/NavbarPanelCenter.vue
+++ b/app/web/src/components/layout/navbar/NavbarPanelCenter.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex items-center justify-center place-items-center mx-auto h-full flex-none"
+    class="flex flex-row flex-none items-center h-full justify-center place-items-center mx-auto overflow-hidden"
   >
     <NavbarButton
       tooltipText="Model"
diff --git a/app/web/src/components/layout/navbar/NavbarPanelLeft.vue b/app/web/src/components/layout/navbar/NavbarPanelLeft.vue
index 2b3b7643b5..c786a33d15 100644
--- a/app/web/src/components/layout/navbar/NavbarPanelLeft.vue
+++ b/app/web/src/components/layout/navbar/NavbarPanelLeft.vue
@@ -1,41 +1,60 @@
 <template>
-  <div class="flex flex-1 items-center select-none">
+  <div
+    class="flex flex-row flex-1 basis-1/2 items-center min-w-[340px] h-full overflow-hidden"
+  >
     <SiLogo class="block h-[44px] w-[44px] ml-[12px] mr-[12px] flex-none" />
 
-    <label>
+    <label class="flex flex-col flex-1 min-w-0 max-w-fit">
       <div
         class="text-[11px] mt-[1px] mb-[5px] capsize font-medium text-neutral-300"
       >
         WORKSPACE:
       </div>
-      <VormInput
+      <DropdownMenuButton
+        ref="dropdownMenuRef"
         v-model="selectedWorkspacePk"
-        class="flex-grow font-bold"
-        size="xs"
-        type="dropdown"
-        noLabel
-        :options="workspaceDropdownOptions"
+        :options="searchFilteredWorkspaceDropdownOptions"
+        :search="workspaceDropdownOptions.length > 20"
         placeholder="-- select a workspace --"
-        @change="updateRoute"
-      />
+        checkable
+        variant="navbar"
+        @select="updateRoute"
+      >
+        <DropdownMenuItem
+          v-if="searchFilteredWorkspaceDropdownOptions.length === 0"
+          label="No Workspaces Match Your Search"
+          header
+        />
+      </DropdownMenuButton>
     </label>
 
-    <Icon name="chevron--right" size="xs" tone="neutral" class="mt-[14px]" />
+    <Icon
+      name="chevron--right"
+      size="xs"
+      tone="neutral"
+      class="mt-[14px] flex-none"
+    />
 
-    <ChangeSetPanel class="max-w-[50%]" />
+    <ChangeSetPanel />
   </div>
 </template>
 
 <script lang="ts" setup>
 import * as _ from "lodash-es";
 import SiLogo from "@si/vue-lib/brand-assets/si-logo-symbol.svg?component";
-import { Icon, VormInput } from "@si/vue-lib/design-system";
+import {
+  DropdownMenuButton,
+  DropdownMenuItem,
+  Icon,
+} from "@si/vue-lib/design-system";
 import { computed, ref, watch } from "vue";
 import { useWorkspacesStore } from "@/store/workspaces.store";
 import ChangeSetPanel from "./ChangeSetPanel.vue";
 
 const workspacesStore = useWorkspacesStore();
 
+const dropdownMenuRef = ref<InstanceType<typeof DropdownMenuButton>>();
+
 const selectedWorkspacePk = ref<string | null>(null);
 watch(
   () => workspacesStore.selectedWorkspacePk,
@@ -45,7 +64,10 @@ watch(
   { immediate: true },
 );
 
-const updateRoute = () => {
+const updateRoute = (newWorkspacePk: string) => {
+  if (selectedWorkspacePk.value === newWorkspacePk) return;
+
+  selectedWorkspacePk.value = newWorkspacePk;
   window.location.href = `${import.meta.env.VITE_AUTH_API_URL}/workspaces/${
     selectedWorkspacePk.value
   }/go`;
@@ -57,4 +79,18 @@ const workspaceDropdownOptions = computed(() =>
     label: w.displayName,
   })),
 );
+
+const searchFilteredWorkspaceDropdownOptions = computed(() => {
+  const searchString = dropdownMenuRef.value?.searchString;
+
+  if (!searchString || searchString === "") {
+    return workspaceDropdownOptions.value;
+  }
+
+  return workspaceDropdownOptions.value.filter(
+    (option) =>
+      option.label.toLocaleLowerCase().includes(searchString) ||
+      option.value.toLocaleLowerCase().includes(searchString),
+  );
+});
 </script>
diff --git a/app/web/src/components/layout/navbar/NavbarPanelRight.vue b/app/web/src/components/layout/navbar/NavbarPanelRight.vue
index 7f4d977db6..9a6b03346c 100644
--- a/app/web/src/components/layout/navbar/NavbarPanelRight.vue
+++ b/app/web/src/components/layout/navbar/NavbarPanelRight.vue
@@ -1,28 +1,48 @@
 <template>
-  <div class="flex items-center justify-end h-full flex-1 min-w-0">
+  <div
+    class="flex flex-row flex-1 basis-1/2 items-center min-w-0 h-full justify-end overflow-hidden"
+  >
     <Collaborators />
 
-    <NavbarButton
-      tooltipText="Documentation"
-      icon="question-circle"
-      externalLinkTo="https://docs.systeminit.com/"
-    />
+    <template v-if="!collapse">
+      <NavbarButton
+        tooltipText="Documentation"
+        icon="question-circle"
+        externalLinkTo="https://docs.systeminit.com/"
+      />
 
-    <NavbarButton
-      tooltipText="Discord Community"
-      icon="logo-discord"
-      externalLinkTo="https://discord.gg/system-init"
-    />
+      <NavbarButton
+        tooltipText="Discord Community"
+        icon="logo-discord"
+        externalLinkTo="https://discord.gg/system-init"
+      />
 
-    <WorkspaceSettingsMenu />
+      <WorkspaceSettingsMenu />
+    </template>
 
-    <ProfileButton />
+    <ProfileButton :showTopLevelMenuItems="collapse" />
   </div>
 </template>
 
 <script lang="ts" setup>
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 import NavbarButton from "./NavbarButton.vue";
 import Collaborators from "./Collaborators.vue";
 import WorkspaceSettingsMenu from "./WorkspaceSettingsMenu.vue";
 import ProfileButton from "./ProfileButton.vue";
+
+const windowWidth = ref(window.innerWidth);
+const collapse = computed(() => windowWidth.value < 850);
+
+const windowResizeHandler = () => {
+  windowWidth.value = window.innerWidth;
+};
+
+onMounted(() => {
+  windowResizeHandler();
+  window.addEventListener("resize", windowResizeHandler);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", windowResizeHandler);
+});
 </script>
diff --git a/app/web/src/components/layout/navbar/ProfileButton.vue b/app/web/src/components/layout/navbar/ProfileButton.vue
index 42085cfb70..70db2c0212 100644
--- a/app/web/src/components/layout/navbar/ProfileButton.vue
+++ b/app/web/src/components/layout/navbar/ProfileButton.vue
@@ -14,6 +14,12 @@
         />
         <SiArrow :nudge="open || hovered" class="ml-1" />
       </div>
+
+      <template v-if="showTopLevelMenuItems">
+        <WorkspaceImportModal ref="importModalRef" />
+        <WorkspaceExportModal ref="exportModalRef" />
+        <WorkspaceIntegrationsModal ref="integrationsModalRef" />
+      </template>
     </template>
 
     <template #dropdownContent>
@@ -39,6 +45,23 @@
         label="Admin Dashboard"
         linkToNamedRoute="workspace-admin-dashboard"
       />
+      <template v-if="showTopLevelMenuItems">
+        <DropdownMenuItem
+          icon="question-circle"
+          label="Documentation"
+          href="https://docs.systeminit.com/"
+        />
+        <DropdownMenuItem
+          icon="logo-discord"
+          label="Discord Community"
+          href="https://discord.gg/system-init"
+        />
+        <DropdownMenuItem
+          icon="settings"
+          label="Workspace Settings"
+          @click="openSettings"
+        />
+      </template>
       <DropdownMenuItem
         class="profile-dropdown-menu-logout"
         icon="logout"
@@ -47,30 +70,38 @@
       />
     </template>
     <template #dropdownContentSecondary>
-      <DropdownMenuItem
-        checkable
-        :checked="!userOverrideTheme"
-        icon="bolt"
-        @select="userOverrideTheme = null"
-      >
-        System theme
-      </DropdownMenuItem>
-      <DropdownMenuItem
-        checkable
-        :checked="userOverrideTheme === 'light'"
-        icon="sun"
-        @select="userOverrideTheme = 'light'"
-      >
-        Light theme
-      </DropdownMenuItem>
-      <DropdownMenuItem
-        checkable
-        :checked="userOverrideTheme === 'dark'"
-        icon="moon"
-        @select="userOverrideTheme = 'dark'"
-      >
-        Dark theme
-      </DropdownMenuItem>
+      <WorkspaceSettingsMenuItems
+        v-if="secondaryMenu === 'settings'"
+        @openImportModal="importModalRef?.open()"
+        @openExportModal="exportModalRef?.open()"
+        @openIntegrationsModal="integrationsModalRef?.open()"
+      />
+      <template v-else>
+        <DropdownMenuItem
+          checkable
+          :checked="!userOverrideTheme"
+          icon="bolt"
+          @select="userOverrideTheme = null"
+        >
+          System theme
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          checkable
+          :checked="userOverrideTheme === 'light'"
+          icon="sun"
+          @select="userOverrideTheme = 'light'"
+        >
+          Light theme
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          checkable
+          :checked="userOverrideTheme === 'dark'"
+          icon="moon"
+          @select="userOverrideTheme = 'dark'"
+        >
+          Dark theme
+        </DropdownMenuItem>
+      </template>
     </template>
   </NavbarButton>
 </template>
@@ -83,8 +114,21 @@ import { useAuthStore } from "@/store/auth.store";
 import { isDevMode } from "@/utils/debug";
 import { useWorkspacesStore } from "@/store/workspaces.store";
 import { useFeatureFlagsStore } from "@/store/feature_flags.store";
+import WorkspaceImportModal from "@/components/WorkspaceImportModal.vue";
+import WorkspaceExportModal from "@/components/WorkspaceExportModal.vue";
+import WorkspaceIntegrationsModal from "@/components/WorkspaceIntegrationsModal.vue";
 import NavbarButton from "./NavbarButton.vue";
 import UserIcon from "./UserIcon.vue";
+import WorkspaceSettingsMenuItems from "./WorkspaceSettingsMenuItems.vue";
+
+const importModalRef = ref<InstanceType<typeof WorkspaceImportModal>>();
+const exportModalRef = ref<InstanceType<typeof WorkspaceExportModal>>();
+const integrationsModalRef =
+  ref<InstanceType<typeof WorkspaceIntegrationsModal>>();
+
+defineProps({
+  showTopLevelMenuItems: { type: Boolean },
+});
 
 const featureFlagsStore = useFeatureFlagsStore();
 
@@ -105,7 +149,15 @@ const themeIcon = computed(() => {
   else return "bolt";
 });
 
+const secondaryMenu = ref<"theme" | "settings">("theme");
+
 const changeTheme = () => {
+  secondaryMenu.value = "theme";
+  navbarButtonRef.value?.openSecondary();
+};
+
+const openSettings = () => {
+  secondaryMenu.value = "settings";
   navbarButtonRef.value?.openSecondary();
 };
 </script>
diff --git a/app/web/src/components/layout/navbar/WorkspaceSettingsMenu.vue b/app/web/src/components/layout/navbar/WorkspaceSettingsMenu.vue
index efaf9c89ff..ce3641fa04 100644
--- a/app/web/src/components/layout/navbar/WorkspaceSettingsMenu.vue
+++ b/app/web/src/components/layout/navbar/WorkspaceSettingsMenu.vue
@@ -2,104 +2,28 @@
 <template>
   <NavbarButton icon="settings" tooltipText="Workspace Settings">
     <template #dropdownContent>
-      <DropdownMenuItem
-        icon="settings"
-        label="Manage Workspaces"
-        @click="openManageWorkspacesHandler"
-      />
-      <DropdownMenuItem
-        icon="cloud-upload"
-        label="Export Workspace"
-        @click="exportModalRef?.open()"
-      />
-      <DropdownMenuItem
-        icon="cloud-download"
-        label="Import Workspace"
-        @click="importModalRef?.open()"
-      />
-      <DropdownMenuItem
-        icon="edit"
-        label="Manage Users"
-        @click="openWorkspaceDetailsHandler"
-      />
-      <DropdownMenuItem
-        v-if="showViz"
-        icon="diagram"
-        label="Visualizer"
-        @click="gotoViz"
-      />
-      <DropdownMenuItem
-        icon="clipboard-copy"
-        label="Copy Workspace Token"
-        @click="copyWorkspaceToken"
-      />
-      <DropdownMenuItem
-        v-if="featureFlagsStore.SLACK_WEBHOOK"
-        icon="settings"
-        label="Workspace Integrations"
-        @click="integrationsModalRef?.open()"
+      <WorkspaceSettingsMenuItems
+        @openImportModal="importModalRef?.open()"
+        @openExportModal="exportModalRef?.open()"
+        @openIntegrationsModal="integrationsModalRef?.open()"
       />
     </template>
+    <WorkspaceImportModal ref="importModalRef" />
+    <WorkspaceExportModal ref="exportModalRef" />
+    <WorkspaceIntegrationsModal ref="integrationsModalRef" />
   </NavbarButton>
-
-  <WorkspaceImportModal ref="importModalRef" />
-  <WorkspaceExportModal ref="exportModalRef" />
-  <WorkspaceIntegrationsModal ref="integrationsModalRef" />
 </template>
 
 <script setup lang="ts">
-import { DropdownMenuItem } from "@si/vue-lib/design-system";
-import { ref, computed } from "vue";
-import { useRouter, useRoute } from "vue-router";
+import { ref } from "vue";
 import WorkspaceImportModal from "@/components/WorkspaceImportModal.vue";
 import WorkspaceExportModal from "@/components/WorkspaceExportModal.vue";
 import WorkspaceIntegrationsModal from "@/components/WorkspaceIntegrationsModal.vue";
-import { useWorkspacesStore } from "@/store/workspaces.store";
-import { useChangeSetsStore } from "@/store/change_sets.store";
-import { useFeatureFlagsStore } from "@/store/feature_flags.store";
+import WorkspaceSettingsMenuItems from "./WorkspaceSettingsMenuItems.vue";
 import NavbarButton from "./NavbarButton.vue";
 
-const AUTH_PORTAL_URL = import.meta.env.VITE_AUTH_PORTAL_URL;
 const importModalRef = ref<InstanceType<typeof WorkspaceImportModal>>();
 const exportModalRef = ref<InstanceType<typeof WorkspaceExportModal>>();
 const integrationsModalRef =
   ref<InstanceType<typeof WorkspaceIntegrationsModal>>();
-
-const workspacesStore = useWorkspacesStore();
-const changeSetStore = useChangeSetsStore();
-const featureFlagsStore = useFeatureFlagsStore();
-const router = useRouter();
-const route = useRoute();
-
-const openWorkspaceDetailsHandler = () => {
-  const currentWorkspace = workspacesStore.urlSelectedWorkspaceId;
-  if (!currentWorkspace) return;
-  window.open(`${AUTH_PORTAL_URL}/workspace/${currentWorkspace}`, "_blank");
-};
-
-const openManageWorkspacesHandler = () => {
-  const currentWorkspace = workspacesStore.urlSelectedWorkspaceId;
-  if (!currentWorkspace) return;
-  window.open(`${AUTH_PORTAL_URL}/workspaces/`, "_blank");
-};
-
-const showViz = computed(() => {
-  return changeSetStore.selectedChangeSetId;
-});
-
-const gotoViz = () => {
-  router.push({
-    name: "workspace-viz",
-    params: {
-      ...route.params,
-      changeSetId: changeSetStore.selectedChangeSetId,
-    },
-  });
-};
-
-const copyWorkspaceToken = () => {
-  const currentWorkspace = workspacesStore.selectedWorkspace;
-  // eslint-disable-next-line @typescript-eslint/no-floating-promises
-  navigator.clipboard.writeText(currentWorkspace?.token || "");
-};
 </script>
diff --git a/app/web/src/components/layout/navbar/WorkspaceSettingsMenuItems.vue b/app/web/src/components/layout/navbar/WorkspaceSettingsMenuItems.vue
new file mode 100644
index 0000000000..81c8e45068
--- /dev/null
+++ b/app/web/src/components/layout/navbar/WorkspaceSettingsMenuItems.vue
@@ -0,0 +1,94 @@
+<!-- eslint-disable vue/no-multiple-template-root -->
+<template>
+  <DropdownMenuItem
+    icon="settings"
+    label="Manage Workspaces"
+    @select="openManageWorkspacesHandler"
+  />
+  <DropdownMenuItem
+    icon="cloud-upload"
+    label="Export Workspace"
+    @select="emit('openExportModal')"
+  />
+  <DropdownMenuItem
+    icon="cloud-download"
+    label="Import Workspace"
+    @select="emit('openImportModal')"
+  />
+  <DropdownMenuItem
+    icon="edit"
+    label="Manage Users"
+    @select="openWorkspaceDetailsHandler"
+  />
+  <DropdownMenuItem
+    v-if="showViz"
+    icon="diagram"
+    label="Visualizer"
+    @select="gotoViz"
+  />
+  <DropdownMenuItem
+    icon="clipboard-copy"
+    label="Copy Workspace Token"
+    @select="copyWorkspaceToken"
+  />
+  <DropdownMenuItem
+    v-if="featureFlagsStore.SLACK_WEBHOOK"
+    icon="settings"
+    label="Workspace Integrations"
+    @select="emit('openIntegrationsModal')"
+  />
+</template>
+
+<script setup lang="ts">
+import { DropdownMenuItem } from "@si/vue-lib/design-system";
+import { computed } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { useWorkspacesStore } from "@/store/workspaces.store";
+import { useChangeSetsStore } from "@/store/change_sets.store";
+import { useFeatureFlagsStore } from "@/store/feature_flags.store";
+
+const AUTH_PORTAL_URL = import.meta.env.VITE_AUTH_PORTAL_URL;
+const workspacesStore = useWorkspacesStore();
+const changeSetStore = useChangeSetsStore();
+const featureFlagsStore = useFeatureFlagsStore();
+const router = useRouter();
+const route = useRoute();
+
+const openWorkspaceDetailsHandler = () => {
+  const currentWorkspace = workspacesStore.urlSelectedWorkspaceId;
+  if (!currentWorkspace) return;
+  window.open(`${AUTH_PORTAL_URL}/workspace/${currentWorkspace}`, "_blank");
+};
+
+const openManageWorkspacesHandler = () => {
+  const currentWorkspace = workspacesStore.urlSelectedWorkspaceId;
+  if (!currentWorkspace) return;
+  window.open(`${AUTH_PORTAL_URL}/workspaces/`, "_blank");
+};
+
+const showViz = computed(() => {
+  return changeSetStore.selectedChangeSetId;
+});
+
+const gotoViz = () => {
+  router.push({
+    name: "workspace-viz",
+    params: {
+      ...route.params,
+      changeSetId: changeSetStore.selectedChangeSetId,
+    },
+  });
+};
+
+const copyWorkspaceToken = () => {
+  const currentWorkspace = workspacesStore.selectedWorkspace;
+  // eslint-disable-next-line @typescript-eslint/no-floating-promises
+  navigator.clipboard.writeText(currentWorkspace?.token || "");
+};
+
+const emit = defineEmits([
+  "openExportModal",
+  "openImportModal",
+  "openIntegrationsModal",
+]);
+</script>
diff --git a/app/web/src/main.ts b/app/web/src/main.ts
index 59f77972e7..28d68dfb5a 100644
--- a/app/web/src/main.ts
+++ b/app/web/src/main.ts
@@ -23,6 +23,8 @@ import "./utils/posthog";
 import router from "./router";
 import store from "./store";
 
+export const APP_MINIMUM_WIDTH = 650;
+
 const { envVariables } = getProjectEnvVariables();
 
 let otelEndpoint =
diff --git a/app/web/src/store/presence.store.ts b/app/web/src/store/presence.store.ts
index 7678073e5e..03eac7cfd7 100644
--- a/app/web/src/store/presence.store.ts
+++ b/app/web/src/store/presence.store.ts
@@ -71,6 +71,7 @@ export const usePresenceStore = () => {
         lastSeenAt: new Date(),
         leftDrawerOpen: false,
         leftResizePanelWidth: 0,
+        rightResizePanelWidth: 0,
       }),
       getters: {
         users(): OnlineUser[] {
diff --git a/lib/vue-lib/src/design-system/forms/VormInput.vue b/lib/vue-lib/src/design-system/forms/VormInput.vue
index 9c65e48d34..008fa66694 100644
--- a/lib/vue-lib/src/design-system/forms/VormInput.vue
+++ b/lib/vue-lib/src/design-system/forms/VormInput.vue
@@ -337,9 +337,9 @@ type OptionsAsObjectWithLabels = Record<
   { label: string; [key: string]: any }
 >;
 type OptionsAsSimpleArray = string[];
-type OptionsAsArray = { value: any; label: string }[];
+export type OptionsAsArray = { value: any; label: string }[];
 type OptionsAsNestedArrays = Record<string, OptionsAsArray>;
-type InputOptions =
+export type InputOptions =
   | OptionsAsSimpleObject
   | OptionsAsObjectWithLabels
   | OptionsAsSimpleArray
diff --git a/lib/vue-lib/src/design-system/general/SiSearch.vue b/lib/vue-lib/src/design-system/general/SiSearch.vue
index 9c09c0634e..e73d2fba60 100644
--- a/lib/vue-lib/src/design-system/general/SiSearch.vue
+++ b/lib/vue-lib/src/design-system/general/SiSearch.vue
@@ -1,18 +1,31 @@
 <template>
   <div
-    :class="clsx(dropdownMenuSearch ? '' : 'dark:border-neutral-600 border-b')"
+    :class="
+      clsx(
+        'siSearchRoot',
+        dropdownMenuSearch
+          ? 'rounded-t-md'
+          : 'dark:border-neutral-600 border-b',
+      )
+    "
   >
     <label
-      class="relative text-neutral-400 focus-within:text-neutral-600 block h-[34px]"
+      :class="
+        clsx(
+          'relative text-neutral-400 focus-within:text-neutral-600 block h-[34px]',
+          dropdownMenuSearch && 'rounded-t-md',
+        )
+      "
     >
       <input
+        ref="searchInputRef"
         v-model="searchString"
         :placeholder="placeholder"
         :class="
           clsx(
             'w-full text-xs pl-[32px] py-2xs h-[34px] placeholder:italic outline-offset-[-1px] focus:outline focus:outline-2 focus:outline-action-500',
             dropdownMenuSearch
-              ? 'text-white bg-shade-100 placeholder:text-neutral-400'
+              ? 'text-white bg-shade-100 placeholder:text-neutral-400 rounded-t-md'
               : themeClasses(
                   'text-black bg-shade-0 placeholder:text-neutral-500 focus:bg-neutral-50',
                   'text-white bg-neutral-800 placeholder:text-neutral-400 focus:bg-shade-100',
@@ -102,6 +115,7 @@ import { IconNames } from "../icons/icon_set";
 import { themeClasses } from "../utils/theme_tools";
 
 const transitionRef = ref<HTMLDivElement>();
+const searchInputRef = ref<HTMLInputElement>();
 
 const captureHeight = () => {
   if (transitionRef.value) {
@@ -127,6 +141,7 @@ export type Filter = {
 
 const emit = defineEmits<{
   (e: "search", searchTerm: string): void;
+  (e: "clearSearch"): void;
   (e: "update:modelValue", newValue: string): void;
 }>();
 
@@ -186,6 +201,7 @@ function triggerSearch() {
 
 function clearSearch() {
   searchString.value = "";
+  emit("clearSearch");
 }
 
 const debouncedAutoSearch = _.debounce(triggerAutoSearch, 50);
@@ -201,7 +217,10 @@ function triggerAutoSearch() {
 
 function onKeyDown(e: KeyboardEvent) {
   if (e.key === "Enter") triggerSearch();
+  if (e.key === "Escape" && searchInputRef.value) {
+    searchInputRef.value.blur();
+  }
 }
 
-defineExpose({ filteringActive, activeFilters });
+defineExpose({ filteringActive, activeFilters, clearSearch });
 </script>
diff --git a/lib/vue-lib/src/design-system/index.ts b/lib/vue-lib/src/design-system/index.ts
index bc5fd362ae..d5c2282230 100644
--- a/lib/vue-lib/src/design-system/index.ts
+++ b/lib/vue-lib/src/design-system/index.ts
@@ -37,6 +37,7 @@ export { default as Tiles } from "./layout/Tiles.vue";
 export { default as DropdownMenu } from "./menus/DropdownMenu.vue";
 export type { DropdownMenuItemObjectDef } from "./menus/DropdownMenu.vue";
 export { default as DropdownMenuItem } from "./menus/DropdownMenuItem.vue";
+export { default as DropdownMenuButton } from "./menus/DropdownMenuButton.vue";
 
 // ./modals
 export { default as Modal } from "./modals/Modal.vue";
diff --git a/lib/vue-lib/src/design-system/menus/DropdownMenu.vue b/lib/vue-lib/src/design-system/menus/DropdownMenu.vue
index 544eac39cc..e7ffc28f10 100644
--- a/lib/vue-lib/src/design-system/menus/DropdownMenu.vue
+++ b/lib/vue-lib/src/design-system/menus/DropdownMenu.vue
@@ -10,7 +10,7 @@
           'flex flex-col',
           variant === 'editor'
             ? 'rounded border border-neutral-600 min-w-[164px]'
-            : 'p-2xs outline outline-offset-0 rounded-md outline-neutral-300 outline-0 dark:outline-1',
+            : 'outline outline-offset-0 rounded-md outline-neutral-300 outline-0 dark:outline-1',
           isRepositioning && 'opacity-0',
         )
       "
@@ -25,8 +25,10 @@
         dropdownMenuSearch
         :allFilter="{ name: 'All Views' }"
         :filters="searchFilters"
-        @click.stop
+        @click.stop="selectSearch"
+        @blur="deselectSearch"
         @search="onSearch"
+        @clearSearch="onSearch('')"
       />
       <div
         ref="scrollDivRef"
@@ -146,6 +148,7 @@ const props = defineProps({
 
   maxWidth: { type: Number, default: 280 }, // change this to adjust the maximum width of the DropdownMenu
   matchWidthToAnchor: { type: Boolean }, // forces the width of the menu to match the anchorTo element's width
+  minWidthToAnchor: { type: Boolean }, // forces the width of the menu to match or be bigger than the anchorTo element's width
 });
 
 const internalRef = ref<HTMLElement | null>(null);
@@ -271,6 +274,10 @@ function finishOpening() {
 function close(shouldNotClose = false, closeRecursively = true) {
   if (shouldNotClose) return;
   isOpen.value = false;
+  if (oneTimeCloseListener.value) {
+    window.removeEventListener("click", oneTimeCloseListener.value);
+    oneTimeCloseListener.value = undefined;
+  }
   stopListening();
   clearPositioningData();
   emit("onClose");
@@ -282,7 +289,6 @@ function close(shouldNotClose = false, closeRecursively = true) {
   ) {
     (props.anchorTo as SubmenuParent).close();
   }
-  // TODO: could return focus to the menu button (if one exists)
 }
 function closeOnResizeOrScroll(e: Event) {
   // because a scroll event in the DiagramOutline can be a side effect of opening the editor right click menu
@@ -394,15 +400,36 @@ function readjustMenuPosition() {
   }
 }
 
-const computedStyle = computed(() => ({
+const APP_MINIMUM_WIDTH = 650;
+const getWindowWidth = () => {
+  if (window.innerWidth > APP_MINIMUM_WIDTH) return window.innerWidth;
+  else return APP_MINIMUM_WIDTH;
+};
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+const computedStyle: Object = computed(() => ({
   ...(hAlign.value === "left" && { left: `${posX.value}px` }),
   ...(hAlign.value === "right" && { right: `${posX.value}px` }),
   ...(vAlign.value === "below" && { top: `${posY.value}px` }),
   ...(vAlign.value === "above" && { bottom: `${posY.value}px` }),
   ...(menuHeight.value && { maxHeight: `${menuHeight.value}px` }),
-  ...(props.matchWidthToAnchor && anchorEl.value
-    ? { width: `${anchorEl.value.getBoundingClientRect().width}px` }
-    : { maxWidth: `${props.maxWidth}px` }),
+  ...(props.matchWidthToAnchor &&
+    anchorEl.value && {
+      width: `${anchorEl.value.getBoundingClientRect().width}px`,
+    }),
+  ...(props.minWidthToAnchor &&
+    anchorEl.value && {
+      minWidth: `${anchorEl.value.getBoundingClientRect().width}px`,
+      maxWidth: `${Math.min(
+        getWindowWidth() -
+          anchorEl.value.getBoundingClientRect().left -
+          MENU_EDGE_BUFFER,
+        getWindowWidth() / 2,
+      )}px`, // the maximum width of a dropdown menu with this setting is half of the browser window width
+    }),
+  ...(!props.matchWidthToAnchor &&
+    !props.minWidthToAnchor &&
+    anchorEl.value && { maxWidth: `${props.maxWidth}px` }),
 }));
 
 // Event handling //////////////////////////////////////////////////////////////////////////////////////////////
@@ -413,7 +440,23 @@ function startListening() {
   window.addEventListener("resize", closeOnResizeOrScroll);
   window.addEventListener("scroll", closeOnResizeOrScroll, true);
 }
+
+const oneTimeCloseListener = ref<undefined | (() => void)>(undefined);
+const createOneTimeCloseListener = (noCloseOnClick: boolean) => {
+  return () => {
+    close(noCloseOnClick);
+  };
+};
 function onWindowMousedown(e: MouseEvent) {
+  if (
+    e.target &&
+    e.target instanceof Element &&
+    e.target.closest(".siSearchRoot")
+  ) {
+    // do not close the Dropdown if you click on the search bar!
+    return;
+  }
+
   if (
     e.target instanceof Element &&
     e.target.getAttribute("role") === "menuitem"
@@ -422,19 +465,17 @@ function onWindowMousedown(e: MouseEvent) {
     return;
   } else if (
     e.target instanceof Element &&
-    internalRef.value?.contains(e.target)
+    internalRef.value?.contains(e.target) &&
+    !oneTimeCloseListener.value
   ) {
     // then detect clicks on one of this menu's children and respond accordingly
     const noCloseOnClick = Boolean(
       e.target.getAttribute("data-no-close-on-click"),
     );
-    window.addEventListener(
-      "click",
-      () => {
-        close(noCloseOnClick);
-      },
-      { once: true },
-    );
+    oneTimeCloseListener.value = createOneTimeCloseListener(noCloseOnClick);
+    window.addEventListener("click", oneTimeCloseListener.value, {
+      once: true,
+    });
   } else if (!(props.submenu && e.target === props.anchorTo?.$el)) {
     // finally, close this menu unless it is a submenu and the element being clicked is the parent
     close();
@@ -450,6 +491,12 @@ function onKeyboardEvent(e: KeyboardEvent) {
     if (focusedItemIndex.value === undefined) focusedItemIndex.value = 0;
     else focusedItemIndex.value += 1;
     e.preventDefault();
+  }
+
+  if (searchSelected.value) {
+    if (e.key === "Escape") {
+      deselectSearch();
+    }
   } else if (e.key === "Enter" || e.key === " ") {
     // TODO(WENDY) - how does this part conflict with using the search bar?
     focusedItemEl.value.click();
@@ -521,7 +568,20 @@ function onSearch(searchString: string) {
 const searchFilteringActive = computed(
   () => siSearchRef.value?.filteringActive,
 );
-const searchActiveFilters = computed(() => siSearchRef.value?.activeFilters);
+const searchActiveFilters = computed(
+  () => siSearchRef.value?.activeFilters || [],
+);
+
+const searchSelected = ref(false);
+const selectSearch = () => {
+  searchSelected.value = true;
+};
+const deselectSearch = () => {
+  if (siSearchRef.value) {
+    siSearchRef.value.clearSearch();
+  }
+  searchSelected.value = false;
+};
 
 // this is what is exposed to the component usign this component (via template ref)
 defineExpose({
diff --git a/lib/vue-lib/src/design-system/menus/DropdownMenuButton.vue b/lib/vue-lib/src/design-system/menus/DropdownMenuButton.vue
new file mode 100644
index 0000000000..457399241a
--- /dev/null
+++ b/lib/vue-lib/src/design-system/menus/DropdownMenuButton.vue
@@ -0,0 +1,230 @@
+<template>
+  <button
+    ref="buttonRef"
+    :class="
+      clsx(
+        'flex flex-row items-center p-2xs mb-[-1px] h-7',
+        'font-mono text-[13px] text-left truncate relative border',
+        variant === 'navbar' && 'flex-1 font-bold min-w-[80px] max-w-fit',
+        disabled
+          ? [
+              'cursor-not-allowed',
+              themeClasses(
+                'text-neutral-500 bg-caution-lines-light',
+                'text-neutral-400 bg-caution-lines-dark',
+              ),
+            ]
+          : 'cursor-pointer',
+        isFocus
+          ? themeClasses(
+              'border-action-500 bg-shade-0',
+              'border-action-300 bg-shade-100',
+            )
+          : [
+              variant === 'navbar'
+                ? 'border-neutral-600 bg-shade-100'
+                : themeClasses(
+                    'border-neutral-400 bg-neutral-100',
+                    'border-neutral-600 bg-neutral-900',
+                  ),
+            ],
+      )
+    "
+    @blur="onBlur"
+    @focus="disabled ? null : onFocus()"
+    @click="open"
+  >
+    <div
+      :class="clsx('flex-1 truncate py-2xs', variant === 'navbar' && 'px-2xs')"
+    >
+      <template v-if="modelValue">{{ modelValueLabel }}</template>
+      <template v-else>{{ placeholder }}</template>
+    </div>
+    <Icon
+      :class="
+        clsx(
+          isFocus
+            ? themeClasses('text-action-500', 'text-action-300')
+            : themeClasses('text-neutral-400', 'text-neutral-600'),
+        )
+      "
+      name="input-type-select"
+      size="sm"
+    />
+    <DropdownMenu
+      ref="dropdownMenuRef"
+      :anchorTo="{ $el: buttonRef }"
+      overlapAnchorOnAnchorTo
+      :matchWidthToAnchor="variant === 'standard'"
+      :minWidthToAnchor="variant === 'navbar'"
+      :overlapAnchorOffset="4"
+      :search="search"
+      :searchFilters="searchFilters"
+      @search="onSearch"
+      @onClose="onClose"
+    >
+      <slot />
+      <slot name="beforeOptions" />
+      <DropdownMenuItem
+        v-for="option in arrayOptionsFromProps"
+        :key="option.value"
+        :label="option.label"
+        :checkable="checkable"
+        :checked="option.value === modelValue"
+        @select="selectOption(option)"
+      />
+      <slot name="afterOptions" />
+    </DropdownMenu>
+  </button>
+</template>
+
+<script lang="ts" setup>
+import * as _ from "lodash-es";
+import clsx from "clsx";
+import { computed, PropType, ref } from "vue";
+import Icon from "../icons/Icon.vue";
+import DropdownMenu from "./DropdownMenu.vue";
+import { themeClasses } from "../utils/theme_tools";
+import { Filter } from "../general/SiSearch.vue";
+import { InputOptions, OptionsAsArray } from "../forms/VormInput.vue";
+import DropdownMenuItem from "./DropdownMenuItem.vue";
+
+export type DropdownMenuButtonVariant = "standard" | "navbar";
+
+const buttonRef = ref();
+const dropdownMenuRef = ref<InstanceType<typeof DropdownMenu>>();
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number, Array, Boolean, null] as PropType<
+      string | number | string[] | boolean | null
+    >,
+  },
+  placeholder: { type: String },
+  disabled: { type: Boolean },
+  search: { type: Boolean },
+  searchFilters: { type: Array<Filter> },
+  checkable: { type: Boolean },
+  focused: { type: Boolean },
+  options: { type: [Object, Array] as PropType<InputOptions> },
+  variant: {
+    type: String as PropType<DropdownMenuButtonVariant>,
+    default: "standard",
+  },
+});
+
+const arrayOptionsFromProps = computed((): OptionsAsArray => {
+  /* eslint-disable consistent-return */
+  if (!props.options) return [];
+  if (_.isArray(props.options)) {
+    if (!_.isObject(props.options[0])) {
+      return _.map(props.options, (value) => ({
+        value,
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        label: value.toString(),
+      }));
+    }
+    // handle array of simple strings
+    if (_.isString(props.options[0])) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      return _.map(props.options, (value) => ({ value, label: value })) as any;
+    }
+    // otherwise its an array of { value, label } and we can pass through as is
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return props.options as any;
+  } else if (_.isObject(props.options)) {
+    // map object of options in format of { val1: label1, ... } to array of options
+    return _.map(props.options, (value, key) => {
+      let label;
+      // if object looks like { o1val: 'o1 label', o2Val... }
+      if (_.isString(value)) label = value;
+      // if object looks like { o1val: { label: 'o1 label' }, o2val... }
+      else if (_.isObject(value)) label = _.get(value, "label");
+      label = label || key; // fallback to using the value as the label otherwise
+      return {
+        value: key,
+        label,
+      };
+    });
+  }
+  return [];
+});
+
+const modelValueLabel = computed(() => {
+  if (!props.modelValue || !arrayOptionsFromProps.value) return undefined;
+
+  const selectedOptions = arrayOptionsFromProps.value.filter(
+    (option) => option.value === props.modelValue,
+  );
+
+  if (selectedOptions.length > 0 && selectedOptions[0]?.label) {
+    return selectedOptions[0].label; // TODO - for now it only gets one option, can't select multiple
+  }
+
+  return undefined;
+});
+
+const focus = ref(false);
+const isFocus = computed(() => props.focused || focus.value);
+
+function onFocus() {
+  focus.value = true;
+}
+function onBlur() {
+  focus.value = false;
+}
+
+const onClose = () => {
+  if (buttonRef.value) buttonRef.value.blur();
+  clearSearch();
+};
+
+const searchString = ref("");
+const onSearch = (search: string) => {
+  searchString.value = search.trim().toLocaleLowerCase();
+};
+const clearSearch = () => {
+  searchString.value = "";
+};
+
+const open = () => {
+  if (dropdownMenuRef.value && !props.disabled) {
+    dropdownMenuRef.value.open();
+  }
+};
+
+const close = () => {
+  if (dropdownMenuRef.value) {
+    dropdownMenuRef.value.close();
+  }
+};
+
+const hovered = computed(() => dropdownMenuRef.value?.hovered);
+const searchFilteringActive = computed(
+  () => dropdownMenuRef.value?.searchFilteringActive,
+);
+const searchActiveFilters = computed(
+  () => dropdownMenuRef.value?.searchActiveFilters || [],
+);
+
+// TODO(Wendy) - for now this component only supports string values
+const selectOption = (option: { value: unknown; label: string }) => {
+  emit("select", option.value as string);
+  emit("update:modelValue", option.value as string);
+};
+const emit = defineEmits<{
+  (e: "select", value: string): void;
+  (e: "update:modelValue", value: string): void;
+}>();
+
+defineExpose({
+  isOpen: dropdownMenuRef.value?.isOpen,
+  open,
+  close,
+  hovered,
+  searchFilteringActive,
+  searchActiveFilters,
+  searchString,
+});
+</script>
diff --git a/lib/vue-lib/src/design-system/menus/DropdownMenuItem.vue b/lib/vue-lib/src/design-system/menus/DropdownMenuItem.vue
index e9b437e7b0..fdc36211fe 100644
--- a/lib/vue-lib/src/design-system/menus/DropdownMenuItem.vue
+++ b/lib/vue-lib/src/design-system/menus/DropdownMenuItem.vue
@@ -14,11 +14,11 @@
           : 'rounded-sm',
         {
           classic: 'p-xs pr-sm',
-          compact: 'p-2xs pr-xs',
+          compact: 'px-xs py-2xs pr-xs',
           editor: [header ? 'p-xs' : 'p-2xs pr-xs', 'h-7'],
         }[menuCtx.variant as DropdownMenuVariant], 
         isFocused && !header && 'bg-action-500',
-        !menuCtx.isCheckable.value &&
+        (!menuCtx.isCheckable.value || disableCheckable) && 
           !icon &&
           !$slots.icon &&
           !header &&
@@ -41,7 +41,7 @@
       size="sm"
     />
     <Icon
-      v-else-if="menuCtx.isCheckable.value"
+      v-else-if="menuCtx.isCheckable.value && !disableCheckable"
       :name="checked ? 'check' : 'none'"
       class="mr-2xs shrink-0 pointer-events-none"
       size="xs"
@@ -62,7 +62,7 @@
 
     <div
       ref="labelRef"
-      class="max-w-full shrink pointer-events-none leading-tight"
+      class="max-w-full min-w-0 shrink pointer-events-none leading-tight"
     >
       <div class="truncate">
         <slot>{{ label }}</slot>
@@ -145,6 +145,8 @@ export interface DropdownMenuItemProps {
 
   checkable?: boolean;
   checked?: boolean;
+  // set this particular DropdownMenuItem to not have a checkmark in a list of otherwise checkable items
+  disableCheckable?: boolean;
 
   doNotCloseMenuOnClick?: boolean;
 
@@ -272,6 +274,7 @@ const dynamicAttrs = computed(() => ({
   // if we set href to undefined when in RouterLink mode, it doesn't set it properly
   ...(htmlTagOrComponentType.value === "a" && {
     href: props.href,
+    target: "_blank",
   }),
 
   // set the target when its a link/router link
diff --git a/lib/vue-lib/src/design-system/modals/Modal.vue b/lib/vue-lib/src/design-system/modals/Modal.vue
index 67149d7ac2..d7e94e0f93 100644
--- a/lib/vue-lib/src/design-system/modals/Modal.vue
+++ b/lib/vue-lib/src/design-system/modals/Modal.vue
@@ -79,7 +79,7 @@
                   <VButton
                     tone="destructive"
                     buttonRank="tertiary"
-                    icon="trash"
+                    icon="x"
                     label="Cancel"
                     variant="ghost"
                     size="xs"
diff --git a/lib/vue-lib/src/design-system/panels/ResizablePanel.vue b/lib/vue-lib/src/design-system/panels/ResizablePanel.vue
index 1558a549ae..adac27f169 100644
--- a/lib/vue-lib/src/design-system/panels/ResizablePanel.vue
+++ b/lib/vue-lib/src/design-system/panels/ResizablePanel.vue
@@ -137,6 +137,12 @@ const props = defineProps({
   defaultSubpanelSplit: { type: Number, default: 0.5 },
 });
 
+const APP_MINIMUM_WIDTH = 650;
+const getWindowWidth = () => {
+  if (window.innerWidth > APP_MINIMUM_WIDTH) return window.innerWidth;
+  else return APP_MINIMUM_WIDTH;
+};
+
 const isTopOrBottom = computed(
   () => props.side === "top" || props.side === "bottom",
 );
@@ -161,7 +167,7 @@ const setSize = (newSize: number) => {
   }
   if (props.minSizeRatio) {
     const limit =
-      (isTopOrBottom.value ? window.innerHeight : window.innerWidth) *
+      (isTopOrBottom.value ? window.innerHeight : getWindowWidth()) *
       props.minSizeRatio;
     if (finalSize < limit) finalSize = limit;
   }
@@ -171,7 +177,7 @@ const setSize = (newSize: number) => {
   }
   if (props.maxSizeRatio) {
     const limit =
-      (isTopOrBottom.value ? window.innerHeight : window.innerWidth) *
+      (isTopOrBottom.value ? window.innerHeight : getWindowWidth()) *
       props.maxSizeRatio;
 
     if (finalSize > limit) finalSize = limit;
@@ -197,7 +203,7 @@ const maximize = () => {
     setSize(props.maxSize);
   } else if (props.maxSizeRatio) {
     const limit =
-      (isTopOrBottom.value ? window.innerHeight : window.innerWidth) *
+      (isTopOrBottom.value ? window.innerHeight : getWindowWidth()) *
       props.maxSizeRatio;
     setSize(limit);
   }