From d3921f63152ec540e8920cf2857e941de0aa9329 Mon Sep 17 00:00:00 2001
From: Julius Knorr <jus@bitgrid.net>
Date: Wed, 3 Jun 2026 22:14:53 +0200
Subject: [PATCH] feat(ui): put EuroOffice first and align office card wording

Wording per release materials: both Nextcloud Office cards get a
'powered by' subtitle, ONLYOFFICE attribution and feature bullets
updated.

AI-assistant: Claude Code 2.1.162 (Claude Opus 4.8)
Signed-off-by: Julius Knorr <jus@bitgrid.net>
---
 php/public/style.css                          |  7 ++
 .../includes/optional-containers.twig         | 88 +++++++++++--------
 2 files changed, 56 insertions(+), 39 deletions(-)

diff --git a/php/public/style.css b/php/public/style.css
index 7564b8fd..5a7199ba 100644
--- a/php/public/style.css
+++ b/php/public/style.css
@@ -637,6 +637,13 @@ input[type="checkbox"]:disabled:not(:checked) + label {
     color: var(--color-main-text);
 }
 
+.office-powered-by {
+    margin: 4px 0 0;
+    font-size: 13px;
+    color: var(--color-main-text);
+    opacity: 0.7;
+}
+
 .office-checkmark {
     flex-shrink: 0;
     display: none;
diff --git a/php/templates/includes/optional-containers.twig b/php/templates/includes/optional-containers.twig
index 972d2705..a2f86430 100644
--- a/php/templates/includes/optional-containers.twig
+++ b/php/templates/includes/optional-containers.twig
@@ -14,6 +14,42 @@
         <p>Choose your preferred office suite. Only one can be enabled at a time.</p>
     {% endif %}
     <div class="office-suite-cards">
+        <input
+            type="radio"
+            id="office-eurooffice"
+            name="office_suite_choice"
+            value="eurooffice"
+            class="office-radio"
+            {% if is_eurooffice_enabled == true %}
+                checked="checked"
+            {% endif %}
+        >
+        <label class="office-card{{ isAnyRunning ? ' office-card-disabled' : '' }}" for="office-eurooffice">
+            <div class="office-card-header">
+                <div>
+                    <h4>Nextcloud Office</h4>
+                    <p class="office-powered-by">powered by Euro-Office</p>
+                </div>
+                <svg class="office-checkmark" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <circle cx="12" cy="12" r="10" fill="var(--color-nextcloud-blue)"/>
+                    <path d="M7 12L10.5 15.5L17 9" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+            </div>
+            <ul class="office-features">
+                <li>Good Nextcloud integration</li>
+                <li>Open source</li>
+                <li>Best performance</li>
+                <li>Limited ODF compatibility</li>
+                <li>Best Microsoft compatibility</li>
+                <li>Good security</li>
+            </ul>
+            {% if isAnyRunning == false %}
+                <a href="https://github.com/Euro-Office" target="_blank" class="office-learn-more" data-stop-event-propagation="true">
+                    Learn more
+                </a>
+            {% endif %}
+        </label>
+        <input type="hidden" id="eurooffice" name="eurooffice" value="" data-initial-state="{% if is_eurooffice_enabled == true %}true{% else %}false{% endif %}">
         <input
             type="radio"
             id="office-collabora"
@@ -26,7 +62,10 @@
         >
         <label class="office-card{{ isAnyRunning ? ' office-card-disabled' : '' }}" for="office-collabora">
             <div class="office-card-header">
-                <h4>Collabora Office</h4>
+                <div>
+                    <h4>Nextcloud Office</h4>
+                    <p class="office-powered-by">powered by Collabora Online</p>
+                </div>
                 <svg class="office-checkmark" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <circle cx="12" cy="12" r="10" fill="var(--color-nextcloud-blue)"/>
                     <path d="M7 12L10.5 15.5L17 9" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
@@ -36,9 +75,9 @@
                 <li>Best Nextcloud integration</li>
                 <li>Open source</li>
                 <li>Good performance</li>
-                <li>Best security: documents never leave your server</li>
                 <li>Best ODF compatibility</li>
                 <li>Best support for legacy files</li>
+                <li>Best security: documents never leave your server</li>
             </ul>
             {% if isAnyRunning == false %}
                 <a href="https://www.collaboraoffice.com/code/" target="_blank" class="office-learn-more" data-stop-event-propagation="true">
@@ -60,18 +99,22 @@
         >
         <label class="office-card{{ isAnyRunning ? ' office-card-disabled' : '' }}{{ is_onlyoffice_enabled == false ? ' office-card-hidden' : '' }}" for="office-onlyoffice">
             <div class="office-card-header">
-                <h4>OnlyOffice</h4>
+                <div>
+                    <h4>ONLYOFFICE</h4>
+                    <p class="office-powered-by">by Ascensio System SIA</p>
+                </div>
                 <svg class="office-checkmark" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <circle cx="12" cy="12" r="10" fill="var(--color-nextcloud-blue)"/>
                     <path d="M7 12L10.5 15.5L17 9" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                 </svg>
             </div>
             <ul class="office-features">
-                <li>Good Nextcloud integration</li>
-                <li>Open core</li>
+                <li>OK Nextcloud integration</li>
+                <li>Open Core</li>
                 <li>Best performance</li>
-                <li>Best Microsoft compatibility</li>
                 <li>Limited ODF compatibility</li>
+                <li>Best Microsoft compatibility</li>
+                <li>Good security</li>
             </ul>
             {% if isAnyRunning == false %}
                 <a href="https://www.onlyoffice.com/" target="_blank" class="office-learn-more" data-stop-event-propagation="true">
@@ -81,39 +124,6 @@
             {% endif %}
         </label>
         <input type="hidden" id="onlyoffice" name="onlyoffice" value="" data-initial-state="{% if is_onlyoffice_enabled == true %}true{% else %}false{% endif %}">
-        <input
-            type="radio"
-            id="office-eurooffice"
-            name="office_suite_choice"
-            value="eurooffice"
-            class="office-radio"
-            {% if is_eurooffice_enabled == true %}
-                checked="checked"
-            {% endif %}
-        >
-        <label class="office-card{{ isAnyRunning ? ' office-card-disabled' : '' }}" for="office-eurooffice">
-            <div class="office-card-header">
-                <h4>Nextcloud Office</h4>
-                <svg class="office-checkmark" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <circle cx="12" cy="12" r="10" fill="var(--color-nextcloud-blue)"/>
-                    <path d="M7 12L10.5 15.5L17 9" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>
-            </div>
-            <ul class="office-features">
-                <li>Powered by Euro-Office</li>
-                <li>Good Nextcloud integration</li>
-                <li>Open source</li>
-                <li>Best performance</li>
-                <li>Limited ODF compatibility</li>
-                <li>Best Microsoft compatibility</li>
-            </ul>
-            {% if isAnyRunning == false %}
-                <a href="https://github.com/Euro-Office" target="_blank" class="office-learn-more" data-stop-event-propagation="true">
-                    Learn more
-                </a>
-            {% endif %}
-        </label>
-        <input type="hidden" id="eurooffice" name="eurooffice" value="" data-initial-state="{% if is_eurooffice_enabled == true %}true{% else %}false{% endif %}">
     </div>
     {% if isAnyRunning == false %}
         <div class="office-none-card">