mockup image no longer scales with window scroll, drawer changes, etc, but is limited to 1600x900px at this time

Author: MrBeeAreWhy

src/components/ComponentDisplay.vue

@@ -208,7 +208,8 @@ export default {
     mockBg() {
       return this.imagePath[this.activeRoute]
         ? {
-            background: `url("${this.userImage}") center/contain no-repeat rgba(223, 218, 218, 0.886)`,
+            background: `url("${this.userImage}") no-repeat rgba(223, 218, 218, 0.886) top left`,
+            "background-size": "contain"
           }
         : {};
     },
@@ -422,9 +423,13 @@ export default {
   list-style: none;
 }
 .component-display {
-  height: 95.4vh;
+  top: 0px;
+  left: 0px;
   width: 100%;
-  position: relative;
+  height: 100%;
+  min-width: 1600px;
+  min-height: 900px;
+  position: absolute;
 }
 .grid-bg {
   background-color: rgba(223, 218, 218, 0.886);

src/components/dashboard_items/Dashboard.vue

@@ -128,10 +128,9 @@ i {
 }
 
 .home-sidebar {
-  margin: 1rem;
+  padding: 1rem;
   justify-content: center;
   border-radius: 5px;
-  padding: 0px;
   background: $subsecondary;
 }
 

src/components/home_sidebar_items/ComponentTab/ComponentTab.vue

@@ -2,6 +2,7 @@
 Functionality includes: if active component is selected, will switch view to editing mode. If not, it will be in create mode -->
 <template>
   <q-card id="store-cards">
+    <UploadImage />
     <CreateComponent v-if="activeComponent === ''"/>
     <EditDeleteComponents v-if="activeComponent !== ''"/>
   </q-card>
@@ -43,7 +44,7 @@ export default {
   
 }
 .q-tab-panel {
-  height: 100%;
+  height: calc(100% - 30px);
   // matches the code editor bg
   background: $subprimary;
   // changes the length of the tab panels

src/components/home_sidebar_items/ComponentTab/UploadImage.vue

@@ -150,6 +150,7 @@ export default {
   height: 100%;
   margin: 1rem;
   font-size: 11px;
+
 }
 
 .file-header {
@@ -158,6 +159,7 @@ export default {
 
 .file-content {
   padding: 0em 1em 1em 1em;
+  
 }
 
 .browser-btn {

src/css/app.scss

@@ -41,6 +41,7 @@ main {
 {
     width: 10px;
     background-color: $subsecondary;
+    z-index: 15;
 }
 
 ::-webkit-scrollbar-track

src/layouts/MyLayout.vue

@@ -275,27 +275,29 @@ q-btn > i {
 
 .resizeDrag {
   position: absolute;
-  left: -5px;
-  top: 50vh;
+  left: -20px;
+  top: 50%;
   width: 20px;
   height: 40px;
-  background-color: #202122;
+  background-image: linear-gradient(to right, #202122 50%, rgba(255, 255, 255, 0) 50%);
   border-radius: 4px;
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
   z-index: 10;
   cursor: col-resize;
 }
 
 .resizeDragTwo{
   position: absolute;
-  left: calc(100vw - 10px);
-  top: calc(50vh + 33.59px);
-  width: 10px;
+  left: calc(100vw - 20px);
+  top: calc(50vh + 25px);
+  width: 20px;
   height: 40px;
-  background-color: #202122;
+  background-image: linear-gradient(to right, #202122 50%, rgba(255, 255, 255, 0) 50%);
   border-radius: 4px;
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
-  z-index: 10;
+  z-index: 1;
   cursor: col-resize;
 }
 

src/pages/Index2.vue

@@ -5,7 +5,7 @@ Description:
   -->
 
 <template>
-  <q-page class="flex flex-center">
+  <q-page class="flex flex-center" id="compDisplay">
     <ComponentDisplay />
   </q-page>
 </template>
@@ -23,3 +23,12 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+ #compDisplay{
+   overflow-x: scroll;
+   overflow-y: scroll;
+   margin: 0px;
+   padding: 0px;
+ }
+</style>