From ef0b2e03c338c89f9d97c144e563ebd0fa9eb524 Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Thu, 20 Feb 2025 15:47:05 +1100
Subject: [PATCH] fix: enhance SingleDatePicker layout with grid styling and
 update component description

---
 src/components/SingleDatePicker.tsx | 3 ++-
 src/style.scss                      | 6 ++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/SingleDatePicker.tsx b/src/components/SingleDatePicker.tsx
index ef1582e..439716c 100644
--- a/src/components/SingleDatePicker.tsx
+++ b/src/components/SingleDatePicker.tsx
@@ -74,6 +74,7 @@ export interface SingleDatePickerProps {
 }
 
 /**
+ * SingleDatePicker
  * A panel that allows users to select a date.
  * 
  * @component
@@ -205,7 +206,7 @@ const SingleDatePicker: React.FC<SingleDatePickerProps> = ({ value, onSelect, lo
 				</button>
 				<button className='stepper' onClick={skipToNextMonth} aria-label={`Go to next month, ${new Date(currentYear, currentMonth + 1).toLocaleString(localization || navigator.language, { month: 'long' })}`}><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg></button>
 			</div>
-			<div className='calendar-view-body' aria-live="polite">
+			<div className='calendar-view-body grid' aria-live="polite">
 				{l10nDays.map((day, index) => <div className='item day-indicator' key={index}>{day}</div>)}
 
 				{dates.map(date => <button
diff --git a/src/style.scss b/src/style.scss
index d8b02cf..e80b364 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -66,10 +66,12 @@
 	}
 
 	.calendar-view-body {
-		display: grid;
-		grid-template-columns: repeat(7, 1fr);
 		padding: 0.75rem;
 		gap: 0.125rem;
+		&.grid{
+			display: grid;
+			grid-template-columns: repeat(7, 1fr);
+		}
 		.item {
 			width: 2rem;
 			height: 2rem;