added text-shadow to components and gave components minimum width so they wouldnt get smushed when resizing the screen

Author: JojuOlaode

src/components/ComponentDisplay.vue

@@ -18,7 +18,6 @@
       @deactivated="onDeactivated(componentData)"
       @dragging="onDrag"
       @resizing="onResize"
-      @dblclick.native="onDoubleClick(componentData)"
       @dragstop="finishedDrag"
       @resizestop="finishedResize"
       :onDragStart="recordInitialPosition"
@@ -368,12 +367,6 @@ export default {
       //   console.log("We just clicked without making a new active component")
       // }
     },
-    onDoubleClick (compData) {
-      if (!(componentData.componentName === this.activeComponent)) {
-        this.setActiveComponent(componentData.componentName)
-      }
-      this.activeComponentData.isActive = true
-    },
     handleAddChild () {
       // render modal with childrenmultiselect in it
       this.modalOpen = true
@@ -396,11 +389,6 @@ export default {
       if (e.target.innerText === '-' && payload.z > 0) payload.z--
       this.updateComponentLayer(payload)
     },
-    //       @dblclick.native="onDoubleClick(componentData)"
-    // onDoubleClick (compData) {
-    //   this.setActiveComponent(compData.componentName)
-    //   this.activeComponentData.isActive = true
-    // }
     handleClick (event) {
       if (event.target.className === 'component-display grid-bg') {
         if (!(this.activeComponent === '')) this.setActiveComponent('')
@@ -417,6 +405,7 @@ export default {
   top: -18px;
   left: 2px;
   color: black;
+  text-shadow: white 0px 0px 3px;
   font-weight: 800;
   /* background: rgba(0, 0, 0, 0.678); */
   /* width: 1rem; */

src/components/Footer.vue

@@ -22,7 +22,7 @@
         <q-tab name="html" label="HTML Elements" id="label-text" />
       </q-tabs>
 
-      <q-tab-panels v-model="tab" animated class="html-bg text-white full-footer">
+      <q-tab-panels v-model="tab" animated class="html-bg text-white" >
         <q-tab-panel name="code">
           <CodeSnippet />
         </q-tab-panel>
@@ -172,10 +172,10 @@ i {
   background: black;
 }
 
-.full-footer {
-  // height: 100vh;
-  padding-bottom: 0px;
-}
+// .full-footer {
+//   // height: 100vh;
+
+// }
 
 #footer-cards {
   height: 100%;

src/components/HomeQueue.vue

@@ -150,6 +150,7 @@ li {
 .list-group-item {
   display: inline-block;
   margin: 2px 1.5%;
+  min-width: 145px;
   width: 30%;
   border-radius: 0.5cm;
   border: 2px solid $secondary;