From dadf1d8418c51698a8e148d19312d6911f67091e Mon Sep 17 00:00:00 2001
From: transitrix <automation@transitrix.com>
Date: Wed, 21 Oct 2026 11:14:04 +0400
Subject: [PATCH] Keep ArchiMate element names readable with enlarged mobile
 text

---
 assets/css/style.css                     | 21 +++++++++++++++++++++
 library/archimate-cheat-sheet/index.html |  2 +-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 792fd27..a200ecb 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1013,3 +1013,24 @@ button:focus-visible {
 .site-footer a {
   overflow-wrap: anywhere;
 }
+
+/* Leave room for long element names when mobile readers enlarge their text. */
+@media (max-width: 480px) {
+  .archimate-sheet {
+    width: 100%;
+    padding-inline: 12px;
+  }
+
+  .archimate-sheet .sheet-layer {
+    padding: 12px;
+  }
+
+  .archimate-sheet .sheet-element {
+    gap: 8px;
+  }
+
+  .archimate-sheet .element-symbol {
+    width: 26px;
+    height: 23px;
+  }
+}
diff --git a/library/archimate-cheat-sheet/index.html b/library/archimate-cheat-sheet/index.html
index 203fbf6..d725d40 100644
--- a/library/archimate-cheat-sheet/index.html
+++ b/library/archimate-cheat-sheet/index.html
@@ -53,7 +53,7 @@
       </nav>
     </div>
   </header>
-  <main id="main" class="wrap" tabindex="-1">
+  <main id="main" class="wrap archimate-sheet" tabindex="-1">
     <div class="hero">
       <p class="pub-date"><a href="../">&larr; Library</a></p>
       <h1>ArchiMate cheat sheet — every element, by layer and aspect</h1>