style: update style

Author: Quorafind

src/styles/habit.css

@@ -14,18 +14,32 @@
 	display: grid;
 	grid-template-columns: repeat(1, minmax(0, 1fr));
 	gap: 1rem; /* gap-4 */
+	width: 100%;
+}
+
+/* 小屏幕设备 */
+@media screen and (max-width: 480px) {
+	.habit-list-container {
+		padding: 0.5rem;
+		gap: 0.75rem;
+	}
 }
 
-/* Medium breakpoint (md:) equivalent ~768px */
-@media (min-width: 768px) {
+/* 中等屏幕设备 ~768px */
+@media screen and (min-width: 768px) {
 	.habit-list-container {
 		margin-left: auto;
 		margin-right: auto;
 		max-width: 400px;
-		width: 100%;
 		display: flex;
 		flex-direction: column;
-		gap: 1rem;
+	}
+}
+
+/* 大屏幕设备 */
+@media screen and (min-width: 1024px) {
+	.habit-list-container {
+		max-width: 500px;
 	}
 }
 /* Adjust max-width/columns based on desired layout */
@@ -47,6 +61,7 @@
 	flex-direction: column; /* Stack header and content */
 	width: 100%;
 	height: 100%;
+	min-height: fit-content;
 }
 
 .card-header {