From c490c413ece3d79a4bd82355383e00ff631fd630 Mon Sep 17 00:00:00 2001
From: Lennart <18233294+lennart-k@users.noreply.github.com>
Date: Fri, 18 Jul 2025 19:53:45 +0200
Subject: [PATCH] frontend: Fix layout of calendar component chips

---
 crates/frontend/public/assets/style.css       | 19 +++++++++---------
 .../sections/calendars_section.html           | 20 +++++++++----------
 2 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/crates/frontend/public/assets/style.css b/crates/frontend/public/assets/style.css
index 503f784..d621e41 100644
--- a/crates/frontend/public/assets/style.css
+++ b/crates/frontend/public/assets/style.css
@@ -224,15 +224,15 @@ ul.collection-list {
       min-height: 80px;
       height: fit-content;
       grid-template-areas:
-        ".                .                 color-chip"
-        "title            comps             color-chip"
-        "description      description       color-chip"
-        "subscription-url subscription-url  color-chip"
-        "metadata         metadata          color-chip"
-        "actions          actions           color-chip"
-        ".                .                 color-chip";
+        ".                color-chip"
+        "title            color-chip"
+        "description      color-chip"
+        "subscription-url color-chip"
+        "metadata         color-chip"
+        "actions          color-chip"
+        ".                color-chip";
       grid-template-rows: 12px auto auto auto auto auto 12px;
-      grid-template-columns: min-content auto 80px;
+      grid-template-columns: auto 80px;
       row-gap: 4px;
       color: inherit;
       text-decoration: none;
@@ -260,7 +260,7 @@ ul.collection-list {
       }
 
       .comps {
-        grid-area: comps;
+        display: inline;
 
         span {
           margin: 0 2px;
@@ -293,6 +293,7 @@ ul.collection-list {
       }
 
       .actions {
+        pointer-events: all;
         grid-area: actions;
         width: fit-content;
         display: flex;
diff --git a/crates/frontend/public/templates/components/sections/calendars_section.html b/crates/frontend/public/templates/components/sections/calendars_section.html
index cbd1f40..e6b84b1 100644
--- a/crates/frontend/public/templates/components/sections/calendars_section.html
+++ b/crates/frontend/public/templates/components/sections/calendars_section.html
@@ -8,12 +8,12 @@
       <span class="title">
         {%- if calendar.principal != user.id -%}{{ calendar.principal }}/{%- endif -%}
         {{ calendar.displayname.to_owned().unwrap_or(calendar.id.to_owned()) }}
+        <div class="comps">
+          {% for comp in calendar.components %}
+          <span>{{ comp }}</span>
+          {% endfor %}
+        </div>
       </span>
-      <div class="comps">
-        {% for comp in calendar.components %}
-        <span>{{ comp }}</span>
-        {% endfor %}
-      </div>
       <span class="description">
         {% if let Some(description) = calendar.description %}{{ description }}{% endif %}
       </span>
@@ -49,12 +49,12 @@
       <span class="title">
         {%- if calendar.principal != user.id -%}{{ calendar.principal }}/{%- endif -%}
         {{ calendar.displayname.to_owned().unwrap_or(calendar.id.to_owned()) }}
+        <div class="comps">
+          {% for comp in calendar.components %}
+          <span>{{ comp }}</span>
+          {% endfor %}
+        </div>
       </span>
-      <div class="comps">
-        {% for comp in calendar.components %}
-        <span>{{ comp }}</span>
-        {% endfor %}
-      </div>
       <span class="description">
         {% if let Some(description) = calendar.description %}{{ description }}{% endif %}
       </span>