From 69a17009ccb273108484dd60d4d0dff7a0af6ee5 Mon Sep 17 00:00:00 2001
From: Adam Schmalhofer <code@adaschma.name>
Date: Thu, 23 Sep 2021 12:41:56 +0200
Subject: [PATCH] Display ingredients and recipe side by side

In full screen mode display both the ingredients and the recipe side by
side instead of having to switch between them via the tabs if there is
enough space.
---
 public/css/grocy.css | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/public/css/grocy.css b/public/css/grocy.css
index 7b0ce2d2..999e8ba5 100755
--- a/public/css/grocy.css
+++ b/public/css/grocy.css
@@ -645,3 +645,23 @@ canvas.drawingBuffer {
 	pointer-events: none;
 	opacity: 0.5;
 }
+
+@media only screen and (min-width: 60rem) {
+    /* See ingredients and recipe side by side */
+
+    .fullscreen .tab-content > .tab-pane {
+        display: inline;
+    }
+
+    .fullscreen #ingredients-0 {
+        min-width: 20rem;
+        max-width: 20rem;
+    }
+    .fullscreen .nav-link[href="#ingredients-0"] {
+        width: 20rem;
+    }
+
+    .fullscreen .tab-content {
+        display: flex;
+    }
+}