feat: replace the food table by a better ui

style.css

@@ -232,6 +232,10 @@ h1 {
     margin-bottom: 4px;
 }
 
+.card-header .food-name {
+    color: #fff;
+}
+
 .food-time {
     font-size: 13px;
     opacity: 0.9;
@@ -251,19 +255,20 @@ h1 {
     opacity: 0.8;
 }
 
-.food-card.expanded .expand-icon {
-    transform: rotate(180deg);
-}
-
 .card-details {
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.3s ease;
-    background: #fafafa;
+    display: none;
 }
 
-.food-card.expanded .card-details {
-    max-height: 300px;
+.card-details.expanded {
+  display: block;
+}
+
+.card-header-toggle .expand-icon {
+  transition: transform 0.3s ease;
+}
+
+.card-header-toggle.expanded .expand-icon {
+  transform: rotate(180deg);
 }
 
 .details-content {
@@ -288,7 +293,6 @@ h1 {
 .nutrition-label {
     font-size: 12px;
     color: #666;
-    text-transform: uppercase;
     letter-spacing: 0.5px;
     margin-bottom: 4px;
 }
@@ -530,6 +534,7 @@ label {
     border-radius: 6px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
     overflow: hidden;
+    margin-top: 30px;
 }
 
 .calendar-header {