fixed card sizes and update Library views

src/components/layouts/NodePreviewZone.vue

@@ -63,5 +63,23 @@ export default {
   .popover-body {
     padding: 0;
   }
+
+  .node-view {
+    width: $node-card-width-sm;
+    max-width: 100%;
+    max-height: 100%;
+
+    @include media-breakpoint-up($size-bp) {
+      width: $node-card-width;
+    }
+
+    &-wrapper {
+      height: $node-card-height-sm;
+
+      @include media-breakpoint-up($size-bp) {
+        height: $node-card-height;
+      }
+    }
+  }
 }
 </style>

src/components/nodes/NodeView.vue

@@ -1,7 +1,7 @@
 <template>
   <article
     class="node-view"
-    :class="['node-view-' + mode, 'node-view-' + type, 'node-view-' + nodeVariant]"
+    :class="['node-view-' + mode, 'node-view-' + type, 'node-view-' + nodeVariant, { 'preview': preview }]"
   >
     <div v-if="!loading" class="node-view-wrapper" :id="'node-' + node.id">
       <component
@@ -78,7 +78,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .node-view {
   position: relative;
 
@@ -93,19 +93,21 @@ export default {
   // ╰─╴╵ ╵╵ ╰└─╯
 
   &-card {
-    max-width: $node-card-width;
     width: 100%;
 
     .node-view-wrapper {
       pointer-events: none;
       width: 100%;
-      max-height: $node-card-height;
       height: 100%;
       overflow: hidden;
     }
 
     &.node-view-depart {
       box-shadow: .5rem .5rem 1rem rgba($black, .25);
+
+      .node-view-child-list-group {
+        box-shadow: .5rem .5rem 1rem rgba($black, .25);
+      }
     }
   }
 

src/components/nodes/NodeViewBody.vue

@@ -99,6 +99,10 @@ export default {
 .node-view-body {
   width: 100%;
 
+  img {
+    max-width: 100%;
+  }
+
   font: {
     family: $font-family-text;
     line-height: inherit;
@@ -111,6 +115,7 @@ export default {
   &-view {
     padding: 0 $node-view-spacer-sm-x;
     font-size: 1.25rem;
+    word-wrap: break-word;
 
     @include media-breakpoint-up($size-bp) {
       padding: 0 $node-view-spacer-x;
@@ -128,6 +133,7 @@ export default {
   &-card {
     padding: 0 $node-card-spacer-sm-x;
     font-size: 1.1rem;
+    word-wrap: anywhere;
 
     @include media-breakpoint-up($size-bp) {
       font-size: 2rem;

src/components/nodes/NodeViewFooter.vue

@@ -90,10 +90,19 @@ export default {
 .node-view-footer {
   margin-top: auto;
   font-family: $font-family-base;
+  font-size: 0.9rem;
+
+  @include media-breakpoint-up($size-bp) {
+    font-size: 1rem;
+  }
 
   .btn-read {
     pointer-events: auto;
   }
+
+  .btn {
+    font-size: inherit;
+  }
 }
 
 .popover-siblings {

src/components/nodes/NodeViewHeaderRef.vue

@@ -90,7 +90,7 @@ export default {
         font-size: 0.65rem;
       }
 
-      @include media-breakpoint-up(sm) {
+      @include media-breakpoint-up($size-bp) {
         font-size: 2rem;
 
         .edition {
@@ -113,7 +113,7 @@ export default {
         font-size: 0.75rem;
       }
 
-      @include media-breakpoint-up(sm) {
+      @include media-breakpoint-up($size-bp) {
         font-size: 2.625rem;
 
         .edition {
@@ -125,7 +125,7 @@ export default {
     .node-view-child-list {
       display: none;
 
-      @include media-breakpoint-up(md) {
+      @include media-breakpoint-up($layout-bp) {
         display: block;
       }
     }