From 22cd99278045aa9d983c2afb09e6e1820cf8f2af Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 15 Sep 2022 22:54:00 +0200
Subject: [PATCH] Enable fluid page layout on medium size viewports

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 31f71d3c005de..5fc3762e8bfce 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;