From 511ef2dfe89bbabdba3198aafa34e6207f34ddf7 Mon Sep 17 00:00:00 2001
From: Jon Bake <jonmbake@gmail.com>
Date: Thu, 2 Nov 2023 18:37:23 -0500
Subject: [PATCH] Truncate month header on small devices

---
 src/calendar.css | 7 +++++++
 src/index.tsx    | 3 ++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/calendar.css b/src/calendar.css
index 319ae84..132f564 100644
--- a/src/calendar.css
+++ b/src/calendar.css
@@ -1,3 +1,10 @@
+@media (max-width: 576px) {
+  .btn {
+    font-size: 12px;
+  }
+}
+
+
 .time-col {
   flex: 0 0 auto;
   width: 9%;
diff --git a/src/index.tsx b/src/index.tsx
index 0f8b91b..a15dc2f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -103,7 +103,8 @@ const Calendar = ({
     <div className="calendar">
       <div className="d-flex justify-content-between m-4">
         <div className="fs-4">
-          <strong>{dateInfo.month}</strong> {dateInfo.year}
+        <span className='d-none d-sm-block'><strong>{dateInfo.month}</strong> {dateInfo.year}</span>
+        <span className='d-block d-sm-none'><strong>{dateInfo.month.substring(0,3)}</strong> {dateInfo.year.toString().substring(2,4)}</span>
         </div>
         <div className="btn-group btn-group-sm" role="group">
           <button