From bc49d1d94541f21659d5951dfac56381e926d8ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Benqu=C3=A9?= <david.benque@xwiki.com>
Date: Fri, 6 May 2022 16:33:07 +0100
Subject: [PATCH] Display longer instance titles on one line on large screens

- refactored flex layout to maximize the length of the instance title
if more screen space is available.
---
 customize.dist/pages/index.js                  | 10 +++++-----
 customize.dist/src/less2/pages/page-index.less | 18 +++++++++++++++---
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/customize.dist/pages/index.js b/customize.dist/pages/index.js
index 09c5dd23d..d4ca0d04f 100644
--- a/customize.dist/pages/index.js
+++ b/customize.dist/pages/index.js
@@ -130,9 +130,9 @@ define([
         // instance title
         var instanceTitle = h('h1.cp-instance-title', Pages.Instance.name);
         // XXX DB: How does TextFit work?!
-        setTimeout(function () {
-            TextFit(instanceTitle, {minFontSize: 13, maxFontSize: 48});
-        });
+        // setTimeout(function () {
+        //     TextFit(instanceTitle, {minFontSize: 13, maxFontSize: 48}); // XXX DB remove?
+        // });
 
         // instance location
         var locationBlock;
@@ -168,7 +168,7 @@ define([
                 notice,
                 h('div.container.cp-container', [
                     h('div.row.cp-home-hero', [
-                        h('div.cp-title.col-md-6', [
+                        h('div.cp-title.col-lg-6', [
                             h('img', {
                                 src: '/customize/CryptPad_logo.svg?' + urlArgs,
                                 'aria-hidden': 'true',
@@ -181,7 +181,7 @@ define([
                             privacyLink,
                             imprintLink
                         ]),
-                        h('div.col-md-6', [
+                        h('div.cp-apps.col-lg-6', [
                             h('div.cp-app-grid', [
                                 h('span.cp-app-new', [
                                     h('i.fa.fa-plus'),
diff --git a/customize.dist/src/less2/pages/page-index.less b/customize.dist/src/less2/pages/page-index.less
index 6c7097668..8264d8e26 100644
--- a/customize.dist/src/less2/pages/page-index.less
+++ b/customize.dist/src/less2/pages/page-index.less
@@ -23,6 +23,7 @@
             flex-flow: column;
             justify-content: space-around;
             justify-content: space-evenly;
+            max-width: 1000vh;
         }
     }
     body {
@@ -46,18 +47,22 @@
         width: 100%;
         align-self: center;
         align-items: center;
+        justify-content: flex-end;
+        @media screen and (max-width: 990px){
+            justify-content: center;
+        }
     }
     .cp-title {
         display: flex;
         align-items: center;
         justify-content: center;
         flex-direction: column;
-        margin-top: 1.5em;
+        margin: 0 auto;
+        flex-grow: 1; // XXX DB: no effect
         img {
             max-width: 200px;
             margin-bottom: 1.5em;
         }
-        margin-left: 0;
         h1 {
             font-family: "IBM Plex Mono";
             font-weight: 500;
@@ -82,6 +87,13 @@
         text-decoration: none;
     }
 
+    .cp-apps{
+        max-width: 575px;
+        @media screen and (max-width: 990px) {
+            align-self: baseline;
+        }
+    }
+
     .cp-app-grid {
         background-color: @cp_alertify-bg;
         border-radius: @infopages-radius-L;
@@ -103,7 +115,7 @@
         a {
             margin: 10px;
         }
-        @media screen and (max-width: 768px) {
+        @media screen and (max-width: 990px) {
             margin-top: 40px;
         }
     }