From ec2af41c96b4d7e7090d89ea58b376de117fd6c7 Mon Sep 17 00:00:00 2001
From: Frank McCready <fmccready@gmail.com>
Date: Sat, 4 Jan 2025 10:22:41 -0600
Subject: [PATCH 1/3] fix: add media query for mobile to prevent overlap on
 character sheet

---
 css/mosh.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/css/mosh.css b/css/mosh.css
index e827cb3..44f4808 100644
--- a/css/mosh.css
+++ b/css/mosh.css
@@ -363,6 +363,9 @@ p {
 
 .mosh .stress {grid-area: stress;}
 .mosh .health {grid-area: centercol;}
+@media screen and (max-width: 660px) {
+  .mosh .health {grid-area: 3 / 1 / 3 / 4;}
+}
 .mosh .healthspread {width:96%;}
 
 .mosh .char-header h1.charname {

From ac211f165af82a28614939edfcd90fbfbc481819 Mon Sep 17 00:00:00 2001
From: Frank McCready <fmccready@gmail.com>
Date: Sat, 4 Jan 2025 10:49:48 -0600
Subject: [PATCH 2/3] fix: add grid template area for mobile health

---
 css/mosh.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/css/mosh.css b/css/mosh.css
index 44f4808..c2dbeb2 100644
--- a/css/mosh.css
+++ b/css/mosh.css
@@ -351,7 +351,8 @@ 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;
@@ -364,7 +365,7 @@ p {
 .mosh .stress {grid-area: stress;}
 .mosh .health {grid-area: centercol;}
 @media screen and (max-width: 660px) {
-  .mosh .health {grid-area: 3 / 1 / 3 / 4;}
+  .mosh .health {grid-area: mobilehealth;}
 }
 .mosh .healthspread {width:96%;}
 

From 0128e7e58bbb1406abaedfca34263f08cdb7ea1a Mon Sep 17 00:00:00 2001
From: Frank McCready <fmccready@gmail.com>
Date: Sat, 4 Jan 2025 14:57:03 -0600
Subject: [PATCH 3/3] refactor: use container query

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

diff --git a/css/mosh.css b/css/mosh.css
index c2dbeb2..1cb17c7 100644
--- a/css/mosh.css
+++ b/css/mosh.css
@@ -357,6 +357,7 @@ p {
   /* background-color: rgb(226, 226, 226); */
   padding: 2px;
   grid-template-columns: 238px auto 100px;
+  container-type: inline-size;
 }
 
 .mosh .abilities {grid-area: abilities;}
@@ -364,7 +365,7 @@ p {
 
 .mosh .stress {grid-area: stress;}
 .mosh .health {grid-area: centercol;}
-@media screen and (max-width: 660px) {
+@container (max-width: 610px) {
   .mosh .health {grid-area: mobilehealth;}
 }
 .mosh .healthspread {width:96%;}