From 4cb5e577a5f6c5a1bd1cbc1afa55f1d78d047783 Mon Sep 17 00:00:00 2001
From: trivernis <trivernis@protonmail.com>
Date: Mon, 12 Jun 2023 11:18:16 +0200
Subject: [PATCH] Fix issue with multiline plant display when hovering

---
 sass/plants.scss      | 11 +++++++++--
 templates/plants.html | 16 +++++++++-------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/sass/plants.scss b/sass/plants.scss
index 9156dbb..10cf97f 100644
--- a/sass/plants.scss
+++ b/sass/plants.scss
@@ -4,10 +4,17 @@
   width: 100%;
   display: block;
 
-  .plant-item {
-    display: flex;
+  .plant-item-wrapper {
+    margin: 0;
+    display: block;
     float: left;
+    height: calc(128px + 2em);
+    width: calc(256px + 2em);
+  }
+
+  .plant-item {
     margin: 1em;
+    display: flex;
     border-radius: 0.5em;
     box-shadow: 0.5em 0.5em $highlight;
     transition-duration: 0.25s;
diff --git a/templates/plants.html b/templates/plants.html
index ca7bd9c..28d134d 100644
--- a/templates/plants.html
+++ b/templates/plants.html
@@ -12,13 +12,15 @@
 <div class="plants-list">
   <!-- If you are using pagination, section.pages will be empty. You need to use the paginator object -->  
   {% for page in section.pages %}
-  <div class="plant-item">
-    {% set data = load_data(path="/static/plants/" ~ page.extra.data ~ "/metadata.toml") %}
-    {% set image = resize_image(path=data.image.url, width=256, height=128, op="fill") %}
-    <a class="plant-link" href="{{ page.permalink | safe }}">
-      <img class="plant-image" src="{{ image.url }}" alt="{{ data.image.alt }}">
-      <h2 class="plant-title">{{ page.title }}</h2>
-    </a>
+  <div class="plant-item-wrapper">
+    <div class="plant-item">
+      {% set data = load_data(path="/static/plants/" ~ page.extra.data ~ "/metadata.toml") %}
+      {% set image = resize_image(path=data.image.url, width=256, height=128, op="fill") %}
+      <a class="plant-link" href="{{ page.permalink | safe }}">
+        <img class="plant-image" src="{{ image.url }}" alt="{{ data.image.alt }}">
+        <h2 class="plant-title">{{ page.title }}</h2>
+      </a>
+    </div>
   </div>
   {% endfor %}
 </div>