msc: style adjustments

frontend/src/components/ActiveSchemaScreen.vue

@@ -11,7 +11,7 @@
                     <va-icon name="circle" color="gray" size="small"></va-icon>
                 </va-list-item-section>
                 <va-list-item-section>
-                    <va-list-item-label class="header-item" caption:lines="index+1">{{ header }}</va-list-item-label>
+                    <va-list-item-label class="header-item" :lines="2">{{ header }}</va-list-item-label>
                 </va-list-item-section>
             </va-list-item>
         </va-list>
@@ -68,7 +68,7 @@ export default defineComponent({
                 "list-view",
                 "mosaic-view",
             ],
-            selectedOption: "mosaic-view"
+            selectedOption: "list-view"
         }
     },
 })

frontend/src/components/ItemDetails.vue

@@ -23,7 +23,7 @@
 
                 <va-card-content>
                     <div class="va-table-responsive">
-                        <table class="va-table va-table--striped">
+                        <table class="va-table va-table--striped detail-table">
                             <tbody>
                                 <tr
                                     v-for="[key, value] of Object.entries(this.itemDetails).filter(([k, _v]) => !(this.hidden.includes(k)))">
@@ -77,10 +77,10 @@ export default {
                 .then(() => this.detailsLoaded = true)
                 .catch((e) => console.log(e));
         },
-        getPreviewPath(){
+        getPreviewPath() {
             for (let extension of ["jpg", "png", "bmp"]) {
                 const path = `/static/previews/${this.itemDetails.fadr}+/${this.itemDetails.internal_id}.${extension}`
-                fetch(path, {method: 'HEAD'})
+                fetch(path, { method: 'HEAD' })
                     .then(resp => {
                         if (resp.status === 200) {
                             this.imageExtension = extension;
@@ -88,7 +88,7 @@ export default {
                     })
                     .catch(e => {
                         // 404 are expected here, so ignore it
-                        if (e.status !== 404){
+                        if (e.status !== 404) {
                             console.log(e)
                         }
                     })
@@ -101,10 +101,10 @@ export default {
         this.fetchItemDetails();
     },
     computed: {
-        slotPreviewPath(){
+        slotPreviewPath() {
             return this.getPreviewPath()
         },
-        internalID(){
+        internalID() {
             return
         }
     },
@@ -138,4 +138,8 @@ export default {
     overflow: auto;
     --va-card-display: flex;
 }
+
+.detail-table {
+    width: 100%;
+}
 </style>

frontend/src/components/OverviewScreen.vue

@@ -39,19 +39,19 @@ export default {
     },
     methods: {},
     computed: {
-        pages(){
+        pages() {
             this.settleFinished = true;
-            return (this.perPage && this.perPage !== 0) 
+            return (this.perPage && this.perPage !== 0)
-            ? Math.ceil(this.items.length / this.perPage)
+                ? Math.ceil(this.items.length / this.perPage)
-            : this.items.length
+                : this.items.length
         },
 
-        itemIdList(){
+        itemIdList() {
 
             return this.items.map(item => item.internal_id)
         },
 
-        settleFinishedComputed(){
+        settleFinishedComputed() {
             let result = this.settleFinished ? this.settleFinished : Boolean(this.items.length);
             this.settleFinished = true;
             return result
@@ -65,7 +65,7 @@ export default {
 <style lang="css" scoped>
 .overview {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     flex-wrap: wrap;
 }
 

frontend/src/views/AdminView.vue

@@ -71,9 +71,9 @@ export default {
 }
 
 .main-view {
-    width: 100%;
+    width: 70%;
     display: flex;
     flex-direction: column;
-    flex: 1 0 100vh;
+    flex: 1 0;
 }
 </style>