From 2a03a7ef3a906bedebf4057f3df9a0e98a65c999 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Denis=20Krienb=C3=BChl?= <denis.krienbuehl@seantis.ch>
Date: Tue, 2 Apr 2019 19:32:55 +0200
Subject: [PATCH] Improves person portrait display on mobile devices

---
 HISTORY.rst                      |  3 +++
 onegov/org/theme/styles/org.scss | 19 +++++++++++++------
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/HISTORY.rst b/HISTORY.rst
index 56de723..8defa81 100644
--- a/HISTORY.rst
+++ b/HISTORY.rst
@@ -1,6 +1,9 @@
 Changelog
 ---------
 
+- Improves person portrait display on mobile devices.
+  [href]
+
 - Fixes date-error when returning to a datetime-picker on Safari.
   [href]
 
diff --git a/onegov/org/theme/styles/org.scss b/onegov/org/theme/styles/org.scss
index a35948c..b756012 100644
--- a/onegov/org/theme/styles/org.scss
+++ b/onegov/org/theme/styles/org.scss
@@ -2188,6 +2188,8 @@ $person-email-icon: '\f003';
         .person-card-portrait {
             float: none;
             margin-bottom: 1em;
+            width: calc(100vw - 3rem);
+            height: calc(100vw - 3rem);
         }
     }
 }
@@ -2197,10 +2199,10 @@ $person-email-icon: '\f003';
 */
 
 .person-list-card {
-    .person-card-portrait {
-        @include circle;
+    display: flex;
 
-        height: 5rem; // enough to show three lines of text
+    .person-card-portrait {
+        height: 5rem;
         text-align: center;
         width: 5rem;
 
@@ -2210,15 +2212,15 @@ $person-email-icon: '\f003';
     }
 
     > a {
-        float: left;
         margin-right: 1em;
     }
 
     ul {
-        float: left;
-
         > li {
             font-size: .875rem;
+            max-width: calc(100vw - 7.5rem);
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
     }
 
@@ -3351,6 +3353,11 @@ ul.search-results {
     h2 {
         border-bottom: 1px solid $gray-pastel;
     }
+
+    ul {
+        margin-left: 0;
+        list-style: none;
+    }
 }
 
 @media #{$large-only} {