Fix posters on mobile

Author: nikoshell

src/components/schedule/day.astro

@@ -445,11 +445,11 @@ const dateText = format(date, "eeee d MMMM");
                 >
                   <h2>Posters ({posters[0].rooms.join(", ")})</h2>
 
-                  <div>
+                  <div class="poster-cards">
                     {posters.map((session) => {
                       const style = {};
 
-                      return <Session session={session} style={style} />;
+                      return <div><Session session={session} style={style} sessionType="poster" /></div>;
                     })}
                   </div>
                 </div>
@@ -658,6 +658,7 @@ const dateText = format(date, "eeee d MMMM");
     :global(.break) {
       grid-row: var(--start) / var(--end);
       grid-column: var(--col-start) / var(--col-end);
+      display: block;
     }
 
     :global(.ep-break.day-end) {
@@ -691,6 +692,11 @@ const dateText = format(date, "eeee d MMMM");
       display: none;
     }
 
+    .posters:hover,
+    .posters:focus-within {
+      z-index: 15;
+    }
+
     .posters {
       grid-column: 3 / 6;
       position: relative;
@@ -701,7 +707,10 @@ const dateText = format(date, "eeee d MMMM");
       z-index: 5;
     }
 
-    .posters h2 {
+    .poster-cards {
+  }
+
+  .posters h2 {
       font-family: 'Inter Tight', system-ui, sans-serif;
       font-weight: 700;
       font-size: 0.8rem;
@@ -722,6 +731,7 @@ const dateText = format(date, "eeee d MMMM");
     .posters :global(.session.poster),
     .posters :global(.ep-session.poster) {
       display: flex;
+      height: 100%;
     }
   }
 </style>

src/components/schedule/session.astro

@@ -50,7 +50,10 @@ const sessionUrl = session.slug ? `/session/${session.slug}` : "#";
     {hasRoom && <span class="ep-session-room">{session.rooms[0]}</span>}
     {durationLabel && <span class="ep-session-duration">{durationLabel}</span>}
   </div>
-  {levelLabel && <div class={`ep-session-level--${session.level}`}>{levelLabel}</div>}
+  <div class="ep-session-badges">
+    {session.sessionType === "poster" && <div class="ep-session-poster-badge">Poster</div>}
+    {levelLabel && <div class={`ep-session-level--${session.level}`}>{levelLabel}</div>}
+  </div>
 </div>
 
 <style>
@@ -108,6 +111,29 @@ const sessionUrl = session.slug ? `/session/${session.slug}` : "#";
     margin-top: auto;
   }
 
+  .ep-session-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.3em;
+    margin-top: 0.15em;
+  }
+
+  .ep-session-poster-badge {
+    padding: 0.1em 0.5em;
+    border-radius: 3px;
+    font-size: 1rem;
+    font-weight: 600;
+    letter-spacing: 0.03em;
+    background: var(--ep-level-intermediate-bg);
+    color: var(--ep-level-intermediate-text);
+  }
+
+  @media (min-width: 800px) {
+    .ep-session-poster-badge {
+      display: none;
+    }
+  }
+
   .ep-session-room,
   .ep-session-duration {
     display: inline;
@@ -122,7 +148,6 @@ const sessionUrl = session.slug ? `/session/${session.slug}` : "#";
   [class^="ep-session-level--"] {
     display: inline-block;
     width: fit-content;
-    margin-top: 0.25em;
     padding: 0.1em 0.5em;
     border-radius: 3px;
     font-size: 1rem;