From 582c6c17712378c5e4c0a6c153ac38c8e764edb7 Mon Sep 17 00:00:00 2001
From: Richard Schreiber <schreiber@rami.io>
Date: Thu, 10 Jul 2025 13:10:30 +0200
Subject: [PATCH] Widget: limit max-width, make mobile overlay bigger
 (Z#23196339) (#5298)

* Widget: limit max-width, make mobile overlay bigger

* overlay in fullscreen for small screens

* re-add topbar for close-button on mobile

* tweak close button-top on mobile

* invert color to make close-button a filled circle again
---
 .../static/pretixpresale/scss/widget.scss     | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/src/pretix/static/pretixpresale/scss/widget.scss b/src/pretix/static/pretixpresale/scss/widget.scss
index a57712b94..00b62bdf6 100644
--- a/src/pretix/static/pretixpresale/scss/widget.scss
+++ b/src/pretix/static/pretixpresale/scss/widget.scss
@@ -961,6 +961,7 @@ $table-bg-accent: rgba(128, 128, 128, 0.05);
 
 .pretix-widget-frame-inner {
   width: 80vw;
+  max-width: 1080px;
   height: 80vh;
 }
 .pretix-widget-frame-inner iframe {
@@ -1087,3 +1088,49 @@ $table-bg-accent: rgba(128, 128, 128, 0.05);
   }
 }
 
+@media (max-width: 800px) {
+  .pretix-widget-frame-inner {
+    width: calc(100vw - 50px);
+    height: calc(100vh - 50px);
+  }
+}
+@media (max-width: 480px) {
+  .pretix-widget-alert-holder,
+  .pretix-widget-frame-holder:not(.pretix-widget-frame-isloading),
+  .pretix-widget-lightbox-holder:not(.pretix-widget-lightbox-isloading) {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    max-width: 100vw;
+  }
+  .pretix-widget-frame-inner,
+  .pretix-widget-lightbox-inner,
+  .pretix-widget-alert-box {
+    width: 100%;
+    height: 100vh;
+    border-radius: 0;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    box-shadow: none;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-sizing: border-box;
+    padding: 40px 0 0;
+    background: var(--pretix-brand-primary);
+  }
+  .pretix-widget-frame-close,
+  .pretix-widget-lightbox-close {
+    top: 8px;
+    right: 12px;
+
+    button {
+      background-color: #fff;
+      path {
+        fill: var(--pretix-brand-primary) !important;
+      }
+      &:focus {
+        outline-color: #fff;
+      }
+    }
+  }
+}