Add styling for checks

src/lang/de.json

@@ -268,5 +268,6 @@
     "DS4.ChecksSwim": "Schwimmen",
     "DS4.ChecksWakeUp": "Erwachen",
     "DS4.ChecksWorkMechanism": "Mechanismus Öffnen",
-    "DS4.ActorCheckFlavor": "{actor} würfelt eine {check} Probe."
+    "DS4.ActorCheckFlavor": "{actor} würfelt eine {check} Probe.",
+    "DS4.CheckTooltip": "{check} Probe würfeln"
 }

src/lang/en.json

@@ -268,5 +268,6 @@
     "DS4.ChecksSwim": "Swim",
     "DS4.ChecksWakeUp": "Wake Up",
     "DS4.ChecksWorkMechanism": "Work Mechanism",
-    "DS4.ActorCheckFlavor": "{actor} rolls a {check} check."
+    "DS4.ActorCheckFlavor": "{actor} rolls a {check} check.",
+    "DS4.CheckTooltip": "Roll a {check} check"
 }

src/module/actor/sheets/actor-sheet.ts

@@ -18,7 +18,7 @@ export class DS4ActorSheet extends ActorSheet<ActorSheet.Data<DS4Actor>> {
         return mergeObject(superDefaultOptions, {
             ...superDefaultOptions,
             classes: ["ds4", "sheet", "actor"],
-            height: 600,
+            height: 615,
             scrollY: [
                 ".values",
                 ".inventory",

src/scss/components/_actor_sheet.scss

@@ -1,4 +1,4 @@
 .ds4.sheet.actor {
     min-width: 650px;
-    min-height: 500px;
+    min-height: 610px;
 }

src/scss/components/_check.scss

@@ -1,3 +1,9 @@
 .ds4-check {
     cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+
+    &:hover {
+        text-shadow: 0 0 10px red;
+    }
 }

src/scss/components/_checks.scss

@@ -1,6 +1,7 @@
 .ds4-checks {
     display: grid;
-    column-gap: 0.5em;
-    grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
+    column-gap: 2em;
+    grid-template-columns: repeat(auto-fit, minmax(11em, 1fr));
+    row-gap: 0.25em;
     white-space: nowrap;
 }

src/templates/sheets/actor/components/check.hbs

@@ -6,6 +6,7 @@
 !-- @param check-label: The label for the check
 --}}
 
-<div class="ds4-check rollable-check" data-check="{{check-key}}">
-    {{check-label}}: {{check-target-number}}
+<div class="ds4-check rollable-check" data-check="{{check-key}}" title="{{localize 'DS4.CheckTooltip' check=check-label}}">
+    <span>{{check-label}}</span>
+    <span>{{check-target-number}}</span>
 </div>