From fbfdd95958d272278af80a433fa5d57911c45fdc Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Sat, 9 Jan 2021 19:52:31 -0800
Subject: [PATCH 1/2] Fix large card layout on mobile

---
 .../document-card-large.component.html           | 16 +++++++++-------
 .../document-card-large.component.scss           |  2 +-
 2 files changed, 10 insertions(+), 8 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 9502a4825..6f2742a8d 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
@@ -31,36 +31,38 @@
         </p>
 
 
-        <div class="d-flex align-items-center">
+        <div class="d-flex flex-column flex-md-row align-items-md-center">
           <div class="btn-group">
             <a routerLink="/search" [queryParams]="{'more_like': document.id}" class="btn btn-sm btn-outline-secondary" *ngIf="moreLikeThis">
               <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots" viewBox="0 0 16 16">
                 <path fill-rule="evenodd" d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
-              </svg>&nbsp;<ng-container i18n>More like this</ng-container>
+              </svg>&nbsp;<span class="d-block d-md-inline" i18n>More like this</span>
             </a>
             <a routerLink="/documents/{{document.id}}" class="btn btn-sm btn-outline-secondary">
               <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-pencil" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5L13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175l-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
-              </svg>&nbsp;<ng-container i18n>Edit</ng-container>
+              </svg>&nbsp;<span class="d-block d-md-inline" i18n>Edit</span>
             </a>
             <a class="btn btn-sm btn-outline-secondary" [href]="getPreviewUrl()">
               <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-search" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"/>
                 <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
-              </svg>&nbsp;<ng-container i18n>View</ng-container>
+              </svg>&nbsp;<span class="d-block d-md-inline" i18n>View</span>
             </a>
             <a class="btn btn-sm btn-outline-secondary" [href]="getDownloadUrl()">
               <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-download" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
                 <path fill-rule="evenodd" d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
-              </svg>&nbsp;<ng-container i18n>Download</ng-container>
+              </svg>&nbsp;<span class="d-block d-md-inline" i18n>Download</span>
             </a>
 
           </div>
 
-          <small *ngIf="searchScore" class="text-muted ml-auto" i18n>Score:</small>
+          <div *ngIf="searchScore" class="d-flex align-items-center ml-md-auto mt-2 mt-md-0">
+            <small class="text-muted" i18n>Score:</small>
 
-          <ngb-progressbar *ngIf="searchScore" [type]="searchScoreClass" [value]="searchScore" class="search-score-bar mx-2" [max]="1"></ngb-progressbar>
+            <ngb-progressbar [type]="searchScoreClass" [value]="searchScore" class="search-score-bar mx-2" [max]="1"></ngb-progressbar>
+          </div>
 
           <small class="text-muted" [class.ml-auto]="!searchScore" i18n>Created: {{document.created | date}}</small>
         </div>
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 0b1604d90..300caca59 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
@@ -15,7 +15,7 @@
 .search-score-bar {
   width: 100px;
   height: 5px;
-  margin-top: 2px;
+  margin-top: 1px;
 }
 
 .document-card-check {

From 49053b6ad2a7f7e39c5788d5ed7dbdb8ce6a61b5 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Sat, 9 Jan 2021 19:53:18 -0800
Subject: [PATCH 2/2] Prevent long title overflow on mobile

---
 .../document-card-large/document-card-large.component.scss    | 4 ++++
 1 file changed, 4 insertions(+)

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 300caca59..a549b6f53 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
@@ -12,6 +12,10 @@
   mix-blend-mode: multiply;
 }
 
+.card-title {
+  word-break: break-word;
+}
+
 .search-score-bar {
   width: 100px;
   height: 5px;