shortens display of language skills

src/module/sheets/character/skills.mjs

@@ -38,7 +38,7 @@ export default {
                     const obj = {
                         type: "talent",
                         gruppe: talentGruppe,
-                        name: item.name,
+                        name: item.name.replace(/Sprachen kennen/g, "Sprache:").replace(/Lesen\/Schreiben/g, "Schrift: "),
                         taw: "" + item.system.taw,
                         tawPath: `system.items.${index}.taw`,
                         werte,

src/style/atoms/_typography.scss

@@ -3,9 +3,24 @@
   --font-body: Gentium, sans-serif;
 
   label,
-  .sheet-tabs.tabs a {
+  .sheet-tabs.tabs a,
+  h2 {
     font-family: Gentium, sans-serif;
     font-weight: bold;
+    font-size: 12pt;
+  }
+
+  h2 {
+    height: 32px;
+    line-height: 32px;
+    padding: 0;
+    margin: 0;
+  }
+
+  ul {
+    li {
+      margin-bottom: 16px;
+    }
   }
 
   input,

src/style/molecules/_lists.scss

@@ -1,22 +1,4 @@
 
 .dsa41.sheet.actor.character {
-  .tab.skills {
 
-    columns: 2;
-    column-gap: 20px;
-
-    .talent-group {
-      break-inside: avoid-column;
-      display: unset;
-      height: unset;
-      gap: unset;
-      padding: unset;
-    }
-
-    ul {
-      list-style-type: none;
-      padding-left: 0;
-    }
-
-  }
 }

src/style/molecules/_rollable.scss

@@ -148,7 +148,6 @@ $rollable_colours_font: (
           height: 28px;
           left: -1px;
           top: -2px;
-          scale: 0.8;
 
           img {
             position: absolute;

src/style/organisms/_character-sheet.scss

@@ -8,8 +8,7 @@
 @use "./character-tabs/combat";
 @use "./character-tabs/spells";
 @use "./character-tabs/liturgies";
-
-
+@use "./character-tabs/skills";
 
 .application.sheet.dsa41.actor.character {
 
@@ -87,11 +86,14 @@
       @include inventory.tab;
     }
 
-
     .tab.combat.active {
       @include combat.tab;
     }
 
+    .tab.skills.active {
+      @include skills.tab;
+    }
+
     .tab.spells {
       @include spells.tab;
     }

src/style/organisms/character-tabs/_skills.scss

@@ -0,0 +1,41 @@
+@mixin tab {
+
+  container: thisTab / inline-size;
+
+  .collapsible {
+
+    columns: 2;
+    column-gap: 20px;
+    padding: 8px;
+    display: block;
+    height: unset;
+
+    .talent-group {
+      break-inside: avoid-column;
+      display: unset;
+      height: unset;
+      gap: unset;
+      padding: unset;
+
+    }
+
+    ul {
+      list-style-type: none;
+      padding-left: 0;
+    }
+  }
+
+
+  @container thisTab (inline-size <= 740px ) {
+    .collapsible {
+      columns: 1;
+    }
+  }
+
+  @container thisTab (inline-size > 740px ) {
+    .collapsible {
+      columns: 2;
+    }
+  }
+
+}

src/templates/actor/character/tab-skills.hbs

@@ -1,6 +1,7 @@
 <section class="tab {{tabs.skills.id}} {{tabs.skills.cssClass}}"
          data-tab="{{tabs.skills.id}}"
          data-group="{{tabs.skills.group}}">
+    <div class="collapsible">
     <div class="talent-group">
         <h2>Kampftalente</h2>
         <ul>
@@ -82,4 +83,5 @@
             {{/each}}
         </ul>
     </div>
+    </div>
 </section>