Merge pull request #58 from fmccready/fix-mobile-character-sheet-overlap

fix: overlapping content on small character sheet

css/mosh.css

@@ -351,11 +351,13 @@ p {
   display: grid;
   grid-template-areas:
   'header header header'
-  'abilities centercol saves ';
+  'abilities centercol saves '
+  'mobilehealth mobilehealth mobilehealth';
   grid-gap: 10px;
   /* background-color: rgb(226, 226, 226); */
   padding: 2px;
   grid-template-columns: 238px auto 100px;
+  container-type: inline-size;
 }
 
 .mosh .abilities {grid-area: abilities;}
@@ -363,6 +365,9 @@ p {
 
 .mosh .stress {grid-area: stress;}
 .mosh .health {grid-area: centercol;}
+@container (max-width: 610px) {
+  .mosh .health {grid-area: mobilehealth;}
+}
 .mosh .healthspread {width:96%;}
 
 .mosh .char-header h1.charname {