From d0e3c53815cebea8189afd83bcc6f3d840f3f899 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 19 Sep 2022 14:50:15 +0200
Subject: [PATCH] Enable fluid page layout on medium size viewports (#21178)

Fomantic has abrupt breakpoints at 991px and 768px which leads to
variable amounts of wasted screen space below those breakpoints.
Instead, enable fluid width for all viewport sizes below 1200px.
---
 web_src/less/_base.less | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 31f71d3c0..5fc3762e8 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -737,6 +737,13 @@ a.ui.card:hover,
   padding-bottom: 80px;
 }
 
+/* enable fluid page widths for medium size viewports */
+@media @mediaMdAndUp and @mediaLgAndDown {
+  .ui.ui.ui.container:not(.fluid) {
+    width: calc(100vw - 3em);
+  }
+}
+
 .following.bar {
   z-index: 900;
   left: 0;