Add read-only (e.g., title) to the top of non-windowed windows

[ctm]

Make it so that non-windowed windows only have read-only items at the very top.

Statically, I believe all builds with the mobile feature enabled will require this, but we should also dynamically detect browser use on mobile platforms, too. This will solve the problem with the demo button not being clickable on Android (#1745) and will also solve the same problem with the preferences. It also will give us a place to display information that is normally in the title of the window on windowed systems.

There's a slight complication in that we already have CSS that reserves space at the top of a table window and it is based on the height of the window, using a heuristic that is likely to fail on tablets.

This issue encompasses both detection (how do we know if we're non-windowed) and implementation. The two are entangled, but if we can come up with a foolproof means of detection, that will guide our implementation, so the first part of this issue is to research detection.

[ctm]

Asking Google's AI "how can a web app use css to define a div that is visiible and overlaps the status bar on a mobile device and is invisible when there's no status bar?" gives me the following, which I think is a good start. I think if I then use env(safe-area-inset-top) as the top for where we normally put the preference row, then the right thing might happen. It's worth a try.

To create a div that overlaps the mobile status bar (such as the iPhone notch/island or Android top bar) and disappears when no status bar is present, you must use CSS environment variables combined with a "cover" viewport meta tag.

The key is env(safe-area-inset-top), which returns 0px if no status bar is present (e.g., in landscape mode or on desktop), but returns the height of the notch/status bar when it exists.

1. Configure the Meta Tag (Crucial)

You must tell the browser to allow the web app to render behind the status bar. Add this to your HTML :

html

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0">

2. The CSS

Use position: fixed to place the element at the top, and set the height using env(safe-area-inset-top).

css

.status-bar-overlay {
  /* Fix it to the top */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  
  /* Make the height match the status bar exactly */
  height: env(safe-area-inset-top);
  
  /* Set color/z-index */
  background-color: rgba(0, 0, 0, 0.5); /* Example: Semi-transparent black */
  z-index: 9999; /* Ensure it's on top */
  
  /* Fallback for browsers that don't support env() */
  height: 0px; 
}

3. Making it Invisible When No Status Bar Exists

When there is no status bar (or notch), env(safe-area-inset-top) becomes 0px. The CSS above naturally handles this because height: 0px makes the div invisible.

However, to add styling (like background colors or padding) that should only appear when the status bar is there, you can use CSS logic:

css

/* Only apply background/height when safe area exists */
@media (min-height: 1px) {
  .status-bar-overlay {
    /* If you need a minimum height or padding added to the notch height */
    height: calc(env(safe-area-inset-top) + 0px);
  }
}

Summary of Techniques

• viewport-fit=cover: Allows the browser to fill the entire screen, including the status bar area.
• env(safe-area-inset-top): A dynamic variable representing the notch/status bar height.
• position: fixed: Keeps the element at the top, regardless of scrolling.
  Note: If you are using Capacitor or Cordova, you may need to ensure your native configuration is set to StatusBar.setOverlaysWebView(true)..

[ctm]

Light testing suggests the technique works. Since table.scss already had support for moving the preferences bar down, that's where I tried it. I didn't actually write any code for putting the title in the status bar; I simply change the existing CSS to use env(safe-area-inset-top). I will now try to similarly move the preferences bar on the lobby.