MainUI: Expanded Cell Hidden After Update

Are you experiencing an issue with your MainUI where expanded cells are unexpectedly hidden behind other UI elements after upgrading to 5.1.0.M3? This problem can significantly impact the usability of your interface, making it difficult to view the details within those expanded cells. This guide provides a detailed look at the issue, offering solutions and workarounds to ensure your OpenHAB setup functions smoothly. Let's dive in and explore the fix.

The Problem: Expanded Cells Incorrectly Positioned

After upgrading to the 5.1.0.M3 version, users have reported that the expanded cell is no longer displayed on top of other elements, as it used to be in previous versions. Instead, the expanded cell is hidden behind other cells, making the content invisible and inaccessible. This is a critical usability issue, as the information intended to be displayed in the expanded cell is no longer visible, disrupting the expected user experience. The issue affects the overall user experience and the ability to interact with the UI effectively. Understanding the scope of the problem is the first step toward finding a resolution.

Expected Behavior: Ensuring Proper Cell Visibility

In earlier versions of MainUI, the expanded cell was designed to appear on top of all other UI elements, ensuring that the user could easily view and interact with its content without any obstruction. The expected behavior is that when a user expands a cell, the expanded view should overlay all other cells, providing a clear and accessible view of the cell's information. This design prioritizes the visibility of the expanded content, allowing users to focus on the information without any interference from other elements. The correct positioning is crucial for a positive user experience. This design choice ensures that users can easily view and interact with the cell's content without obstruction, thus creating a seamless and user-friendly experience.

Steps to Reproduce the Issue: Recreating the Problem

To reproduce the issue, you can create a test page with two cells within two oh-grid-cells rows. This setup helps to isolate the problem and confirm the bug's presence. By setting up a basic page, it is easier to isolate and identify the problem. The core issue lies within how the UI handles the stacking order of elements, especially after the update. Here’s the code for the testing page:

config:
  label: Test page
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-cells
          config: {}
          slots:
            default:
              - component: oh-label-cell
                config:
                  footer: footer
                  header: header
                  label: first cell
                  subtitle: subtitle
                  title: title
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-cells
          config: {}
          slots:
            default:
              - component: oh-label-cell
                config:
                  label: second cell

masonry: []
grid: []
canvas: []

To recreate the problem, follow these simple steps:

1. Create a page as described in the YAML code above.
2. Expand a cell in the MainUI.
3. Observe whether the expanded cell appears on top of the other UI elements or if it is hidden behind them.

Your Environment: Key Details for Troubleshooting

To effectively troubleshoot this issue, it's essential to provide the details of your environment. This includes your OpenHAB version, build string, and system information. By providing a detailed environment report, it is easier to identify the root cause of the problem. This will help developers understand the context in which the issue is occurring and determine any dependencies or configurations that might be contributing to the problem. Here is the output:

runtimeInfo:
  version: 5.1.0
  buildString: