From 524a42250d3669eb05b4af08a25f758b3cb2f67a Mon Sep 17 00:00:00 2001
From: Zorex Salvo <zorexsalvo@gmail.com>
Date: Sun, 22 Feb 2026 18:32:23 +0800
Subject: [PATCH] feat: improve Pretalx schedule embed

- Widget scrolls into view on hover
- Height set to 90dvh with scroll contained within wrapper
- Full page width layout with minimal side padding
- Direct link to pretalx.com schedule added to subtext
- Improved subtext copy
---
 .../templates/internal/pages/schedule.html    |  47 ++++----
 static/css/app.css                            | 109 ++++++++++++++++++
 2 files changed, 135 insertions(+), 21 deletions(-)

diff --git a/app/home/templates/internal/pages/schedule.html b/app/home/templates/internal/pages/schedule.html
index 42463ea..77e0154 100644
--- a/app/home/templates/internal/pages/schedule.html
+++ b/app/home/templates/internal/pages/schedule.html
@@ -32,33 +32,38 @@
 {% endblock header %}
 
 
-<div class="w-full px-[4%] pt-40 pb-18 mx-auto max-w-[1440px]">
-  <div class="w-full" id="schedule-container">
+<div class="w-full pt-40 pb-18">
+  <div class="w-full px-[4%] mx-auto max-w-[1440px]" id="schedule-container">
     <h2 class="text-5xl my-10 font-bold font-td_pinoy text-orange-2 text-center sm:text-left max-w-7xl mx-auto">Schedule</h2>
     <div class="content-body font-nunito text-brown-2 text-lg leading-relaxed w-full">
-      <p class="text-brown-2 font-nunito text-center sm:text-left max-w-7xl mx-auto mb-6 italic">Note: This schedule is subject to change. Please check back regularly for updates.</p>
-
-      <div class="min-w-0 w-full">
-        <pretalx-schedule event-url="https://pretalx.com/python-asia-2026/" locale="en" format="grid"></pretalx-schedule>
-      </div>
-      <noscript>
-        <div class="pretalx-widget">
-          <div class="pretalx-widget-info-message">
-            JavaScript is disabled in your browser. To access our schedule without JavaScript, please <a target="_blank" href="https://pretalx.com/python-asia-2026/schedule/nojs">click here</a>.
-          </div>
-        </div>
-      </noscript>
+      <p class="text-brown-2 font-nunito text-center sm:text-left max-w-7xl mx-auto mb-6 italic">
+        The schedule is still taking shape — sessions and times may shift as we finalize the program.
+        Check back closer to the event for the latest updates, or view it directly on <a href="https://pretalx.com/python-asia-2026/schedule/" target="_blank" rel="noopener" class="text-orange-2 underline">pretalx.com</a>.
+      </p>
     </div>
   </div>
+
+  <div id="schedule-widget-wrapper" class="w-full px-[2%]" style="overflow: auto; height: 90dvh;">
+    <pretalx-schedule event-url="https://pretalx.com/python-asia-2026/" locale="en" format="grid"></pretalx-schedule>
+  </div>
+
+  <noscript>
+    <p class="px-[4%] font-nunito text-brown-2 mt-4">
+      JavaScript is disabled in your browser. To access our schedule without JavaScript, please
+      <a class="text-orange-2 underline" target="_blank" href="https://pretalx.com/python-asia-2026/schedule/nojs">click here</a>.
+    </p>
+  </noscript>
 </div>
 
 <script>
-  document.addEventListener('DOMContentLoaded', function() {
-    setTimeout(() => {
-      const scheduleContainer = document.getElementById('schedule-container');
-      if (scheduleContainer) {
-        scheduleContainer.style.overflowX = 'auto';
-      }
-    }, 1000);
+  document.addEventListener('DOMContentLoaded', function () {
+    const wrapper = document.getElementById('schedule-widget-wrapper');
+    const widget = document.querySelector('pretalx-schedule');
+
+    if (widget) widget.style.height = '100%';
+
+    wrapper.addEventListener('mouseenter', () => {
+      wrapper.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    });
   });
 </script>
diff --git a/static/css/app.css b/static/css/app.css
index cc0d9ba..57200be 100644
--- a/static/css/app.css
+++ b/static/css/app.css
@@ -263,6 +263,92 @@
       }
     }
   }
+  .tab {
+    @layer daisyui.l1.l2.l3 {
+      position: relative;
+      display: inline-flex;
+      cursor: pointer;
+      appearance: none;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      webkit-user-select: none;
+      user-select: none;
+      &:hover {
+        @media (hover: hover) {
+          color: var(--color-base-content);
+        }
+      }
+      --tab-p: 0.75rem;
+      --tab-bg: var(--color-base-100);
+      --tab-border-color: var(--color-base-300);
+      --tab-radius-ss: 0;
+      --tab-radius-se: 0;
+      --tab-radius-es: 0;
+      --tab-radius-ee: 0;
+      --tab-order: 0;
+      --tab-radius-min: calc(0.75rem - var(--border));
+      --tab-radius-limit: min(var(--radius-field), var(--tab-radius-min));
+      --tab-radius-grad: #0000 calc(69% - var(--border)),
+      var(--tab-border-color) calc(69% - var(--border) + 0.25px),
+      var(--tab-border-color) 69%,
+      var(--tab-bg) calc(69% + 0.25px);
+      border-color: #0000;
+      order: var(--tab-order);
+      height: var(--tab-height);
+      font-size: 0.875rem;
+      padding-inline: var(--tab-p);
+      &:is(input[type="radio"]) {
+        min-width: fit-content;
+        &:after {
+          --tw-content: attr(aria-label);
+          content: var(--tw-content);
+        }
+      }
+      &:is(label) {
+        position: relative;
+        input {
+          position: absolute;
+          inset: calc(0.25rem * 0);
+          cursor: pointer;
+          appearance: none;
+          opacity: 0%;
+        }
+      }
+      &:checked, &:is(label:has(:checked)), &:is(.tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"]) {
+        & + .tab-content {
+          display: block;
+        }
+      }
+      &:not( :checked, label:has(:checked), :hover, .tab-active, [aria-selected="true"], [aria-current="true"], [aria-current="page"] ) {
+        color: var(--color-base-content);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
+        }
+      }
+      &:not(input):empty {
+        flex-grow: 1;
+        cursor: default;
+      }
+      &:focus {
+        --tw-outline-style: none;
+        outline-style: none;
+        @media (forced-colors: active) {
+          outline: 2px solid transparent;
+          outline-offset: 2px;
+        }
+      }
+      &:focus-visible, &:is(label:has(:checked:focus-visible)) {
+        outline: 2px solid currentColor;
+        outline-offset: -5px;
+      }
+      &[disabled] {
+        pointer-events: none;
+        opacity: 40%;
+      }
+    }
+  }
   .menu {
     @layer daisyui.l1.l2.l3 {
       display: flex;
@@ -2376,6 +2462,26 @@
   .z-\[999\] {
     z-index: 999;
   }
+  .tab-content {
+    @layer daisyui.l1.l2.l3 {
+      order: var(--tabcontent-order);
+      display: none;
+      border-color: transparent;
+      --tabcontent-radius-ss: var(--radius-box);
+      --tabcontent-radius-se: var(--radius-box);
+      --tabcontent-radius-es: var(--radius-box);
+      --tabcontent-radius-ee: var(--radius-box);
+      --tabcontent-order: 1;
+      width: 100%;
+      height: calc(100% - var(--tab-height) + var(--border));
+      margin: var(--tabcontent-margin);
+      border-width: var(--border);
+      border-start-start-radius: var(--tabcontent-radius-ss);
+      border-start-end-radius: var(--tabcontent-radius-se);
+      border-end-start-radius: var(--tabcontent-radius-es);
+      border-end-end-radius: var(--tabcontent-radius-ee);
+    }
+  }
   .hero {
     @layer daisyui.l1.l2.l3 {
       display: grid;
@@ -3284,6 +3390,9 @@
   .px-8 {
     padding-inline: calc(var(--spacing) * 8);
   }
+  .px-\[2\%\] {
+    padding-inline: 2%;
+  }
   .px-\[4\%\] {
     padding-inline: 4%;
   }