💄

src/scss/card.scss

@@ -10,8 +10,6 @@
   list-style-type: none;
   font-size: $large;
   line-height: $xxlarge;
-  // height: auto;
-  // opacity: 0.9;
   transition: background-color 0.4s;
   text-align: left;
   overflow-y: scroll;
@@ -184,8 +182,6 @@
 
   .media {
     display: flex;
-    // max-height: 350px;
-    // justify-content: center;
     flex-direction: column;
     cursor: pointer;
 
@@ -193,14 +189,9 @@
       width: 100%;
       display: flex;
       img {
-        // width: auto;
-        // height: 100%;
-
         max-width: 100%;
         height: auto;
         object-fit: cover;
-        // width: 100%;
-        // height: 250px;
       }
     }
 
@@ -274,4 +265,20 @@
   .embedded {
     width: calc(#{$card-width} - 50px) !important;
   }
+
+  .source-hidden {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    width: calc(#{$card-width} - 35px);
+    border: 2px solid $midgrey;
+    min-height: 260px;
+    background-color: $darkgrey;
+    border-radius: 5px;
+    cursor: auto;
+    h4 {
+      color: white;
+    }
+  }
 }

src/scss/cardstack.scss

@@ -6,7 +6,7 @@ $card-stack-header-height: 38px;
   position: absolute;
   top: calc(#{$card-right} + #{$card-stack-header-height});
   right: $card-right;
-  max-height: calc(100% - 10px);
+  max-height: calc(100% - #{$timeline-height} + 60px);
   height: auto;
   width: $card-width;
   overflow-y: scroll;

src/scss/toolbar.scss

@@ -17,7 +17,7 @@
     position: relative;
     width: $toolbar-width;
     height: 100%;
-    padding: 20px 0px;
+    padding: 20px 0px 0px 0px;
     margin: 0;
     box-sizing: border-box;
     color: $offwhite;
@@ -275,6 +275,7 @@
   position: fixed;
   transition: 0.2s ease;
   left: $toolbar-width;
+  max-height: calc(100vh - #{$timeline-height});
   box-shadow: 10px -10px 38px rgba(0, 0, 0, 0.3),
     10px 15px 12px rgba(0, 0, 0, 0.22);