🔧 Cleaned up the reference card UI

src/client/assets/scss/App.scss

@@ -9,11 +9,19 @@ $border-color: red;
 $volume-color: #fdecd1;
 $issue-color: #f2f1f9;
 $size-8: 0.9rem;
+$size-9: 0.7em;
+$flexSize: 4em;
+$boxSpacing: 1em;
+$colorText: #404646;
 
 .is-size-8 {
   font-size: $size-8;
 }
 
+.is-size-9 {
+  font-size: $size-9;
+}
+
 // global style overrides
 
 pre {
@@ -215,24 +223,23 @@ pre {
     }
 
     .is-horizontal {
-      border: 1px solid #CCC;
+      // margin: $boxSpacing / 2;
-      border-radius: 0.25em;
+      border-radius: 1.5em;
-
+      height: $flexSize;
-      flex-direction: row;
+      max-width: $flexSize * 3;
+      flex: 1 1 auto;
       display: flex;
-      flex-basis: 50ex;
-      flex-grow: 0;
-      flex-shrink: 1;
-      box-shadow: none;
-
       .card-image {
-        align-self: center;
+        img.image {
-        .image {
+          border-top-left-radius: 8px;
-          max-width: 50px;
+          border-bottom-left-radius: 8px;
           border-top-right-radius: 0;
           border-bottom-right-radius: 0;
-          border-top-left-radius: 0.25em;
+          height: 100%;
-          border-bottom-left-radius: 0.25em;
+          max-width: $flexSize * 1.3;
+          object-fit: cover;
+          flex: 1 1 auto;
+        }
       }
     }
     .card-content {
@@ -256,7 +263,6 @@ pre {
     }
   }
 }
-}
 
 // raw file details
 .raw-file-details {

src/client/components/Carda.tsx

@@ -34,6 +34,9 @@ const renderCard = (props): ReactElement => {
             </div>
           </div>
         </div>
+
+
+
       );
     case "vertical":
       return (

src/client/components/Dashboard/RecentlyImported.tsx

@@ -115,8 +115,11 @@ export const RecentlyImported = ({
                   hasDetails
                   imageUrl={sourcedMetadata.comicvine.image.icon_url}
                 >
-                  <dd className="is-size-7"> 
+                  <dd className="is-size-9">
-                        <dl>asdasd</dl>
+                    <dl>Downloaded from:</dl>
+                  </dd>
+                  <dd className="is-size-9">
+                    <dl>Bapacha naav</dl>
                   </dd>
                 </Card>
               </>