From 7b7ba83a875547c4847a0d0aa3f430470c0f19ef Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sat, 19 Feb 2022 21:38:07 -0800
Subject: [PATCH] bs5: fix large card display

---
 .../document-card-large/document-card-large.component.html  | 6 +++---
 .../document-card-large/document-card-large.component.scss  | 4 ++++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
index a6c3f30f8..ea84f8d40 100644
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
@@ -1,9 +1,9 @@
 <div class="card mb-3 shadow-sm" [class.card-selected]="selected" [class.document-card]="selectable" [class.popover-hidden]="popoverHidden" (mouseleave)="mouseLeaveCard()">
-  <div class="row no-gutters">
-    <div class="col-md-2 d-none d-lg-block doc-img-background rounded-start" [class.doc-img-background-selected]="selected" (click)="this.toggleSelected.emit($event)">
+  <div class="row g-0">
+    <div class="col-md-2 doc-img-background rounded-start" [class.doc-img-background-selected]="selected" (click)="this.toggleSelected.emit($event)">
       <img [src]="getThumbUrl()" class="card-img doc-img border-end rounded-start" [class.inverted]="getIsThumbInverted()">
 
-      <div style="top: 0; left: 0" class="position-absolute border-end border-bottom bg-light p-1" [class.document-card-check]="!selected">
+      <div style="top: 0; left: 0" class="position-absolute border-end border-bottom bg-light py-1 px-2" [class.document-card-check]="!selected">
         <div class="custom-control custom-checkbox">
           <input type="checkbox" class="custom-control-input" id="smallCardCheck{{document.id}}" [checked]="selected" (click)="this.toggleSelected.emit($event)">
           <label class="custom-control-label" for="smallCardCheck{{document.id}}"></label>
diff --git a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss
index fb7c14b26..ef155632e 100644
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss
@@ -4,6 +4,10 @@
   overflow-wrap: anywhere;
 }
 
+.doc-img-background {
+  position: relative;
+}
+
 .doc-img {
   object-fit: cover;
   object-position: top left;