From 0c6721e3191e2ac61dead377c40f0d2fb3b8eae2 Mon Sep 17 00:00:00 2001
From: PhilW <roundcube@tehinterweb.co.uk>
Date: Sun, 12 Apr 2026 11:14:55 +0100
Subject: [PATCH] download table layout improvements

---
 download/index.html | 14 +++++-----
 index.html          |  2 +-
 styles/styles.less  | 65 ++++++++++++++++++++++++---------------------
 3 files changed, 42 insertions(+), 39 deletions(-)

diff --git a/download/index.html b/download/index.html
index 42e557d..eeba2a6 100644
--- a/download/index.html
+++ b/download/index.html
@@ -26,20 +26,20 @@ <h2 id="{{ id }}">{{ params.title }}{% if params.titleVersion %} - {{ params.pac
             <th class="package" scope="col">Package</th>
             <td class="link"></td>
             <th class="size text-nowrap" scope="col">Size</th>
-            <th class="checksum" scope="col"><span class="d-none d-lg-inline">SHA-256 checksum</span></th>
+            <th class="checksum" scope="col"><span class="d-none d-md-inline">SHA-256 checksum</span></th>
         </tr>
     </thead>
     <tbody>
         {% for package in params.packages %}
             <tr>
                 <th class="package fw-normal" scope="row">{% unless params.titleVersion %}{{ package.version }} - {% endunless %}{{ package.package }}{% if package.package == "Dependent" %}<sup><a href="#fn1" class="text-body-secondary">1</a></sup>{% endif %}</th>
-                <td class="link text-center text-lg-start"><a href="{{ package.url }}" title="Download now!" class="btn rc-icon btn-rc-download btn-sm"><span>Download</span></a></td>
+                <td class="link"><a href="{{ package.url }}" title="Download now!" class="btn rc-icon btn-rc-download btn-sm"><span>Download</span></a></td>
                 <td class="size text-nowrap">{{ package.size }}</td>
-                <td class="checksum font-monospace text-nowrap text-center text-lg-start pe-3">
-                    <span class="d-none d-lg-inline copy-popover-target">
-                        <span class="copy-target d-block d-lg-inline text-nowrap overflow-auto py-3 py-lg-0">{{ package.checksum }}</span><span class="py-3 py-lg-0"><a class="copy-link" href="#" aria-label="Copy text"></a></span>
+                <td class="checksum font-monospace text-nowrap text-center text-md-start pe-3">
+                    <span class="d-none d-md-inline copy-popover-target">
+                        <span class="copy-target d-block d-md-inline-block text-nowrap text-truncate align-middle py-3 py-md-0">{{ package.checksum }}</span><span class="py-3 py-md-0"><a class="copy-link" href="#" aria-label="Copy text"></a></span>
                     </span>
-                    <a class="d-inline d-lg-none copy-popover-link checksum" href="#" aria-label="SHA-256 checksum" onclick="return false;" data-bs-title="SHA-256 checksum" data-bs-placement="left"></a>
+                    <a class="d-inline d-md-none copy-popover-link checksum" href="#" aria-label="SHA-256 checksum" onclick="return false;" data-bs-title="SHA-256 checksum" data-bs-placement="left"></a>
                 </td>
             </tr>
         {% endfor %}
@@ -47,7 +47,7 @@ <h2 id="{{ id }}">{{ params.title }}{% if params.titleVersion %} - {{ params.pac
     </table>
 {% endfor %}
 
-<p id="fn1" class="text-body-secondary">1. Dependent packages only contain sources which are licensed under the GPL but they require some third-party
+<p id="fn1" class="text-body-secondary mt-4">1. Dependent packages only contain sources which are licensed under the GPL but they require some third-party
     packages to be installed along with Roundcube. All requirements are listed in the INSTALL instructions within the package file.</p>
 
 <h2 id="sources">Other sources and downloads <a class="anchor" href="#sources" aria-label="Link to this section: Other sources and downloads"></a></h2>
diff --git a/index.html b/index.html
index d69dc44..83df609 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@
                 <a href="/screens"><img src="/screens/skins/{{ skin }}/banner.png?g={{ generated }}" {% if site.data.screenshots[skin]['banner-dark'] %}data-rc-dark="/screens/skins/{{ skin }}/banner_dark.png?g={{ generated }}"{% endif %} width="647" height="390" id="bannerimg" class="img-fluid" alt="Welcome Roundcube Webmail"></a>
             </div>
             <div class="download text-center d-flex flex-column justify-content-center justify-content-lg-start align-items-center pt-xl-4">
-                <a href="/download" class="btn rc-icon btn-rc-download btn-lg" title="Download now!">Download</a>
+                <a href="/download" class="btn rc-icon btn-rc-download btn-lg" title="Download now!"><span>Download</span></a>
                 <span class="version text-body-secondary">Version {{ site.data.downloads.stable.packages[0].version }}</span>
             </div>
         </div>
diff --git a/styles/styles.less b/styles/styles.less
index 890253e..fb3e1d3 100644
--- a/styles/styles.less
+++ b/styles/styles.less
@@ -16,6 +16,8 @@
 @color-banner-background: fadeout(mix(@color-primary, #fff, 33%), 50%);
 @color-thumbnail-background: @color-background-alt;
 @color-footer: #495057;
+@color-success: #3fb950;
+@color-error: #f85149;
 
 @color-dark-primary: darken(@color-primary, 30%);
 @color-dark-background-alt: rgba(255, 255, 255, 0.05);
@@ -35,6 +37,8 @@
   --rc-color-thumbnail-background: @color-thumbnail-background;
   --rc-color-footer: @color-footer;
   --rc-color-footer-hover: darken(@color-footer, 15%);
+  --rc-color-success: @color-success;
+  --rc-color-error: @color-error;
 }
 
 html[data-bs-theme="dark"] {
@@ -233,11 +237,13 @@ a.copy-link {
   &.complete:after {
     font: var(--fa-font-solid);
     content: @fa-var-check;
+    color: var(--rc-color-success);
   }
 
   &.error:after {
     font: var(--fa-font-solid);
     content: @fa-var-triangle-exclamation;
+    color: var(--rc-color-error);
   }
 }
 
@@ -360,27 +366,23 @@ a.current-theme::after {
   }
 
   &::before {
-    margin-right: .5rem;
+    margin-right: 0;
     content: @fa-var-download;
   }
 
+  > span {
+    margin-left: @icon-margin * 2;
+  }
+
   &.btn-sm {
-    & > span {
+    > span {
       display: none;
     }
 
-    &::before {
-      margin-right: 0;
-    }
-
-    @media (min-width: @min-width-sm) {
-      & > span {
+    @media (min-width: @min-width-lg) {
+      > span {
         display: inline;
       }
-
-      &::before {
-        margin-right: .5rem;
-      }
     }
   }
 }
@@ -466,49 +468,50 @@ table.download-table {
     vertical-align: middle;
   }
 
-  th.package {
-    width: 55%;
-  }
-
   td.link {
-    width: 20%;
+    width: 60px;
   }
 
   td.size {
-    width: 20%;
+    width: 80px;
   }
 
   td.checksum {
     font-size: 0.9em;
-    width: 5%;
+    width: 40px;
   }
 
   @media (min-width: @min-width-md) {
     th.package {
-      width: 40%;
+      width: 255px;
+    }
+
+    td.checksum {
+      width: auto;
     }
+  }
 
+  @media (min-width: @min-width-lg) {
     td.link {
-      width: 35%;
+      width: 170px;
     }
 
     td.size {
-      width: 20%;
+      width: 120px;
     }
+  }
 
-    td.checksum {
-      width: auto;
+  td.checksum > span > span.copy-target {
+    @media (min-width: @min-width-md) {
+      width: 254px;
     }
-  }
 
-  @media (min-width: @min-width-lg) {
-    th.package {
-      width: 20%;
+    @media (min-width: @min-width-lg) {
+      width: 344px;
     }
 
-    td.link,
-    td.size {
-      width: 15%;
+    @media (min-width: @min-width-xl) {
+      width: auto;
     }
   }
 }