From afac5e3b16a55c8afa0b74bc5f34b7e5d406ce92 Mon Sep 17 00:00:00 2001
From: Pierre de La Morinerie <kemenaran@gmail.com>
Date: Wed, 20 Mar 2019 16:58:10 +0100
Subject: [PATCH] stylesheet: fix logo layout on Chrome

The new layout hits a bug where the logo are not laid out properly.
See https://github.com/philipwalton/flexbugs/issues/225
---
 .../new_design/procedure_context.scss          | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/new_design/procedure_context.scss b/app/assets/stylesheets/new_design/procedure_context.scss
index dccd52c9b..f2fa9502b 100644
--- a/app/assets/stylesheets/new_design/procedure_context.scss
+++ b/app/assets/stylesheets/new_design/procedure_context.scss
@@ -50,15 +50,27 @@ $procedure-context-breakpoint: $two-columns-breakpoint;
   .procedure-logos {
     display: flex;
     justify-content: space-around;
+    align-items: center;
+    margin-bottom: 20px;
+
+    > :not(:last-child) {
+      margin-right: $default-padding;
+    }
 
     img {
-      max-height: 50px;
       max-width: 100%;
-      margin: 0 10px 20px 10px;
+      max-height: 50px;
+
+      // Fix Chrome flexbox issue
+      // See https://github.com/philipwalton/flexbugs/issues/225
+      width: 100%;
+      height: 100%;
+      min-width: 0;
+      object-fit: contain;
 
       @media (min-width: $procedure-context-breakpoint) {
-        max-height: 130px;
         max-width: 500px;
+        max-height: 130px;
       }
     }
   }