Merge pull request #8 from NMSCD/dev

add styling to select elements
NMSCD · Jul 16, 2024 · 9c32047 · 9c32047
2 parents 1f41557 + c09b1ab
commit 9c32047
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 22 deletions.
diff --git a/src/components/EditEndpointDialogue.vue b/src/components/EditEndpointDialogue.vue
@@ -124,17 +124,16 @@ const isOutOfSafeRange = computed(() => {
         type="text"
       />
       <label>Type:</label>
-      <select
-        v-model="newEndpointType"
-        class="select"
-      >
-        <option
-          v-for="endpointType in teleporterTypesEnum"
-          :value="endpointType"
-        >
-          {{ endpointType }}
-        </option>
-      </select>
+      <div class="select">
+        <select v-model="newEndpointType">
+          <option
+            v-for="endpointType in teleporterTypesEnum"
+            :value="endpointType"
+          >
+            {{ endpointType }}
+          </option>
+        </select>
+      </div>
     </form>
 
     <form

diff --git a/src/components/FilterInput.vue b/src/components/FilterInput.vue
@@ -30,16 +30,15 @@ const teleporterFilterTypes = {
   </FilterInputWrapper>
   <FilterInputWrapper>
     <label class="has-text-weight-bold">Filter Types</label>
-    <select
-      v-model="filterType"
-      class="select"
-    >
-      <option
-        v-for="teleporterType in teleporterFilterTypes"
-        :value="teleporterType"
-      >
-        {{ teleporterType }}
-      </option>
-    </select>
+    <div class="select">
+      <select v-model="filterType">
+        <option
+          v-for="teleporterType in teleporterFilterTypes"
+          :value="teleporterType"
+        >
+          {{ teleporterType }}
+        </option>
+      </select>
+    </div>
   </FilterInputWrapper>
 </template>
diff --git a/src/style/style.css b/src/style/style.css
@@ -21,3 +21,7 @@ html {
     color: white;
   }
 }
+
+.select select {
+  width: 100%;
+}