popups now have a "fullscreen" + popup bugfix

frontend/code/components/popup.ts

@@ -9,7 +9,7 @@ export type PopupState = ComponentState & {
     content?: ComponentId;
     color?: ColorSet;
     corner_radius?: number | [number, number, number, number];
-    position?: 'left' | 'top' | 'right' | 'bottom' | 'center';
+    position?: 'left' | 'top' | 'right' | 'bottom' | 'center' | 'fullscreen';
     alignment?: number;
     gap?: number;
     is_open?: boolean;
@@ -32,7 +32,10 @@ export class PopupComponent extends ComponentBase {
         element.appendChild(this.anchorContainer);
 
         this.contentContainer = document.createElement('div');
-        this.contentContainer.classList.add('rio-popup-animation-scale');
+        this.contentContainer.classList.add(
+            'rio-popup-animation-scale',
+            'rio-popup-content'
+        );
         element.appendChild(this.contentContainer);
 
         // Initialize the popup manager. Many of these values will be

frontend/code/popupManager.ts

@@ -10,6 +10,11 @@
 /// and programmatically moves it to the right place.
 ///
 /// While open, the content is assigned the CSS class `rio-popup-manager-open`.
+///
+/// The popup manager may assign classes or CSS to both `content` and `anchor`.
+/// This means you can't pass in a rio component directly (since they could move
+/// outside of the manager in the future, leaving them tainted). If you need to
+/// pass a rio component, wrap it in a div.
 
 import { pixelsPerRem } from './app';
 
@@ -22,7 +27,14 @@ export class PopupManager {
     ///
     /// This is taken as a hint, but can be ignored if there isn't enough space
     /// to fit the pop-up at that location.
-    public position: 'auto' | 'left' | 'top' | 'right' | 'bottom' | 'center';
+    public position:
+        | 'auto'
+        | 'left'
+        | 'top'
+        | 'right'
+        | 'bottom'
+        | 'center'
+        | 'fullscreen';
 
     /// The alignment of the popup within the anchor. If the popup opens to the
     /// left or right, this is the vertical alignment, with `0` being the top
@@ -37,7 +49,14 @@ export class PopupManager {
     constructor(
         anchor: HTMLElement,
         content: HTMLElement,
-        position: 'auto' | 'left' | 'top' | 'right' | 'bottom' | 'center',
+        position:
+            | 'auto'
+            | 'left'
+            | 'top'
+            | 'right'
+            | 'bottom'
+            | 'center'
+            | 'fullscreen',
         alignment: number,
         gap: number
     ) {
@@ -75,6 +94,19 @@ export class PopupManager {
         // Show the content
         this.content.classList.add('rio-popup-manager-open');
 
+        // If the content is to be displayed fullscreen, handle that separately,
+        // since it behaves so differently from the other positions.
+        if (this.position === 'fullscreen') {
+            this.content.style.left = '0';
+            this.content.style.top = '0';
+            this.content.style.width = '100%';
+            this.content.style.height = '100%';
+            return;
+        }
+
+        this.content.style.removeProperty('width');
+        this.content.style.removeProperty('height');
+
         // If the popup position is set to `auto`, convert it to one of the
         // other values, based on the anchor element's position.
         let position = this.position;

frontend/css/style.scss

@@ -2451,6 +2451,10 @@ $rio-input-box-small-label-spacing-top: 0.5rem;
     z-index: $z-index-popup;
 }
 
+.rio-popup-content {
+    @include single-container();
+}
+
 // Image
 .rio-image {
     pointer-events: auto;

rio/components/popup.py

@@ -87,7 +87,9 @@ class Popup(FundamentalComponent):
     _: KW_ONLY
     color: rio.ColorSet = "hud"
     corner_radius: float | tuple[float, float, float, float] | None = None
-    position: Literal["left", "top", "right", "bottom", "center"] = "center"
+    position: Literal[
+        "left", "top", "right", "bottom", "center", "fullscreen"
+    ] = "center"
     alignment: float = 0.5
     gap: float = 0.8
     is_open: bool = False