Restore gaps between slots on Schedule after CSS grid refactoring

Author: datakurre

frontend/packages/volto-techevent/news/19.bugfix

@@ -0,0 +1 @@
+Restore gaps between slots on Schedule after CSS grid refactoring @datakurre

frontend/packages/volto-techevent/src/components/Schedule/DaySchedule.tsx

@@ -193,14 +193,18 @@ const DaySchedule = (props) => {
                 }}
                 key={slotIndex}
               >
-                <Tile
-                  item={slot}
-                  shortDate
-                  showRoom={false}
-                  showDescription={true}
-                  gridColumn={slot.gridColumn}
-                  gridRow={slot.gridRow}
-                />
+                <div
+                  className={`timeslot-container timeslot-${isSession ? 'session' : 'slot'}`}
+                >
+                  <Tile
+                    item={slot}
+                    shortDate
+                    showRoom={false}
+                    showDescription={true}
+                    gridColumn={slot.gridColumn}
+                    gridRow={slot.gridRow}
+                  />
+                </div>
               </div>
             );
           }

frontend/packages/volto-techevent/src/theme/components/schedule/_schedule.scss

@@ -33,7 +33,7 @@
     @media screen and (max-width: $tablet-breakpoint) {
       display: none;
     }
-    padding: $spacing-small;
+    padding: 1.5rem 0 0 0;
     text-align: center;
     .room-label {
       @include add(size, s);
@@ -53,16 +53,23 @@
   .timeslot {
     display: flex;
     flex-direction: column;
-    padding: $spacing-xsmall $spacing-xsmall;
-    margin: 0 0 20px 0;
-    background-color: var(--techevent-schedule-color);
     box-shadow:
-      0 3px 0 0 var(--techevent-schedule-secondary-color),
-      0 10px 0 0 var(--techevent-schedule-reverse-color),
-      0 -3px 0 0 var(--techevent-schedule-secondary-color),
-      0 -10px 0 0 var(--techevent-schedule-reverse-color);
+      0 2px 0 0 var(--techevent-schedule-color),
+      0 6px 0 0 var(--techevent-schedule-color),
+      0 8px 0 0 var(--techevent-schedule-color),
+      0 10px 0 0 var(--techevent-schedule-secondary-color),
+      0 -2px 0 0 var(--techevent-schedule-color),
+      0 -6px 0 0 var(--techevent-schedule-color),
+      0 -8px 0 0 var(--techevent-schedule-color),
+      0 -10px 0 0 var(--techevent-schedule-secondary-color);
+    .timeslot-container {
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      padding: $spacing-xsmall $spacing-xsmall;
+      background-color: var(--techevent-schedule-color);
+    }
     .sessionTile {
-      height: 10rem;
       flex-grow: 1;
       padding: $spacing-2xsmall 0 $spacing-small 0;
       margin: 0 var(--techevent-schedule-gap);
@@ -194,6 +201,7 @@
   @media screen and (min-width: 700px) {
     .tab-content {
       display: grid;
+      grid-gap: 2rem 0;
     }
   }