Make the directory list extend fully, breaks schema popup

src/assets/main.css

@@ -7,6 +7,7 @@
         color-scheme: light;
 
         --color-front: 32 32 32;
+        --color-front-dim: 64 64 64;
         --color-back: 255 255 255;
 
         --color-primary: 23 162 184;
@@ -18,7 +19,9 @@
         :root {
             color-scheme: dark;
 
-            --color-front: 144 144 144;
+            /*--color-front: 144 144 144;*/
+            --color-front: 245 245 245;
+            --color-front-dim: 144 144 144;
             --color-back: 24 24 24;
         }
     }

src/components/Collapsible.vue

@@ -10,7 +10,7 @@ const emit = defineEmits<{
     (e: "update:modelValue", value: string | null): void;
 }>();
 
-const finishedChanging = ref<number | null>(null);
+const finishedChanging = ref<NodeJS.Timeout | null>(null);
 const innerElement = ref<HTMLDivElement | null>(null);
 const style = ref<string | undefined>("height: 0px");
 const cachedValue = ref<string | null>(props.modelValue ?? null);

src/components/TreeView.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="rounded-md bg-front/[.07] p-4 shadow-md shadow-front/20">
+    <div class="tree-view bg-front/[.07] p-4 shadow-front/20">
         <ul v-if="tree" class="list-unstyled">
             <li
                 v-for="item in tree.visible()"
@@ -190,6 +190,12 @@ async function toggle(item: Node) {
 </script>
 
 <style scoped>
+.tree-view {
+    box-shadow: 
+        0 0 #000,
+        0 0 4px 2px rgb(var(--color-front) / .1);
+}
+
 .active {
     @apply text-front font-bold;
 }

src/views/LoginView.vue

@@ -54,7 +54,7 @@ async function login() {
         <form
             id="login-form"
             @submit.prevent="login"
-            class="flex flex-col w-80"
+            class="flex flex-col w-80 text-front-dim"
         >
             <h2 class="mb-2 text-center text-2xl">LDAP Directory Login</h2>
             <hr class="mt-1 mb-2 border-zinc-800" />

src/views/MainView.vue

@@ -120,7 +120,7 @@ watch(oc, (o) => {
 </script>
 
 <template>
-    <div class="w-screen h-screen">
+    <div id="main-view" class="w-screen h-screen flex flex-col">
         <NavBar
             v-model:treeOpen="treeOpen"
             :dn="activeDn"
@@ -133,10 +133,11 @@ watch(oc, (o) => {
 
         <LdifImportDialog v-model:modal="modal" @ok="activeDn = '-'" />
 
-        <div class="flex container">
-            <div class="space-y-4">
+        <div class="flex flex-auto container overflow-clip">
+            <div class="space-y-4 h-full">
                 <!-- left column -->
                 <TreeView
+                    class="h-full w-80"
                     v-model:activeDn="activeDn"
                     v-show="treeOpen"
                     @base-dn="baseDn = $event"
@@ -179,26 +180,26 @@ watch(oc, (o) => {
 </template>
 
 <style scoped>
-.control {
+:deep(.control) {
     @apply opacity-70 hover:opacity-90 cursor-pointer select-none leading-none pt-1 pr-1;
 }
 
-button,
-.btn,
-[type="button"] {
+:deep(button),
+:deep(.btn),
+:deep([type="button"]) {
     @apply px-3 py-2 rounded text-back dark:text-front font-medium outline-none;
 }
 
-button.btn {
+:deep(button.btn) {
     @apply border-solid border-back border-2 focus:border-primary dark:focus:border-front;
 }
 
-select {
+:deep(select) {
     background: url("assets/gray_bg.svg") no-repeat right;
     appearance: none;
 }
 
-.glyph {
+:deep(.glyph) {
     font-family: sans-serif, FontAwesome;
     font-style: normal;
 }

tailwind.config.cjs

@@ -17,6 +17,7 @@ export default {
                 back: withOpacityValue("--color-back"),
                 danger: withOpacityValue("--color-danger"),
                 front: withOpacityValue("--color-front"),
+                "front-dim": withOpacityValue("--color-front-dim"),
                 secondary: withOpacityValue("--color-secondary"),
             },
         },