From e0859e390c6de1bfa3a616fd52daaeceedcc17bb Mon Sep 17 00:00:00 2001
From: UnniKohonen <45235116+UnniKohonen@users.noreply.github.com>
Date: Wed, 11 Nov 2026 15:46:11 +0200
Subject: [PATCH 1/2] Fix mappings layout on mobile

---
 resource/css/skosmos.css        | 26 +++++++++++++++++++++++++-
 resource/js/concept-mappings.js |  4 ++--
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/resource/css/skosmos.css b/resource/css/skosmos.css
index f2efbfcd2..be5661b64 100644
--- a/resource/css/skosmos.css
+++ b/resource/css/skosmos.css
@@ -1315,18 +1315,42 @@ h2#vocab-heading {
   margin-right: 0.25em;
 }
 
-@media (max-width: 992px) {
+#concept-mappings .prop-mapping-label {
+  overflow-wrap: break-word;
+}
+
+@media (max-width: 992px) { /* lg breakpoint */
   .property {
     border-top: 1px solid var(--main-content-border);
     padding-top: .5rem;
   }
+
   .property-label,
   .property-value {
     padding-top: 0;
   }
+
   .property-value::before {
     display: none;
   }
+
+  #concept-mappings .property:first-child {
+    border-top: none;
+    padding-top: 0;
+  }
+}
+
+/* --- Mobile specific rules --- */
+
+@media (max-width: 768px) { /* md breakpoint */
+  .main-content-section {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
+  #concept-mappings .prop-mapping:last-child .row:last-child { /* Last mapping */
+    margin-bottom: 0 !important;
+  }
 }
 
 /* --- Vocab statistics --- */
diff --git a/resource/js/concept-mappings.js b/resource/js/concept-mappings.js
index cdbc0d4b1..04fe22e1d 100644
--- a/resource/js/concept-mappings.js
+++ b/resource/js/concept-mappings.js
@@ -110,12 +110,12 @@ conceptMappingsApp.component('concept-mappings', {
       </div>
       <div class="col-lg-8 gx-0 gx-lg-4 property-value">
         <div class="row mb-2" v-for="m in mapping">
-          <div class="col-5 prop-mapping-label">
+          <div class="col-sm-5 prop-mapping-label">
             <span v-if="m.notation" class="prop-mapping-notation">{{ m.notation }}</span>
             <a :href="m.hrefLink">{{ m.prefLabel }}</a>
             <span v-if="m.lang && m.lang !== this.content_lang"> ({{ m.lang }})</span>
           </div>
-          <div class="col-7 prop-mapping-vocab">{{ m.vocabName }}</div>
+          <div class="col-sm-7 prop-mapping-vocab">{{ m.vocabName }}</div>
         </div>
       </div>
     </div>

From 949bb1aef3b50e3527e1415d80ce4330fa2d566a Mon Sep 17 00:00:00 2001
From: UnniKohonen <45235116+UnniKohonen@users.noreply.github.com>
Date: Thu, 12 Nov 2026 12:24:08 +0200
Subject: [PATCH 2/2] Add overflow wrapping to mapping vocabs

---
 resource/css/skosmos.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/resource/css/skosmos.css b/resource/css/skosmos.css
index be5661b64..33b893001 100644
--- a/resource/css/skosmos.css
+++ b/resource/css/skosmos.css
@@ -1315,7 +1315,8 @@ h2#vocab-heading {
   margin-right: 0.25em;
 }
 
-#concept-mappings .prop-mapping-label {
+#concept-mappings .prop-mapping-label,
+#concept-mappings .prop-mapping-vocab {
   overflow-wrap: break-word;
 }