Madelena / Metrology-for-Hass

🎨 Give your Home Assistant a modern and clean facelift. 🟥🟧🟩🟦🟪 24 Variations with 2 Styles + 6 Colors (Magenta Red / Orange / Green / Blue / Purple) + 🌞 Light and 🌚 Dark modes included. Based on Metro and Fluent UI Design Systems from Microsoft Windows.
https://community.home-assistant.io/t/metrology-metro-fluent-windows-themes-for-home-assistant/
564 stars 30 forks source link

Data in more info popup doesn't scroll when it overflows #59

Open caraar12345 opened 1 year ago

caraar12345 commented 1 year ago

Heyo! Bit of a weird bug that I've seen recently with Metrology.

The first screenshot shows the OpenWeatherMap more info popup at a normal size, with the weather for Wednesday at 3pm showing outside the bottom of the panel. It's not possible to scroll to see any more.

The second screenshot shows the same popup but zoomed out so everything fits within the box again; that's the only way to see everything

zanix commented 1 year ago

This is ~probably~ the result of fixing tooltips causing the more info popup to overflow #51 You can remove these lines from metro.yaml but then tooltips will cause the container to show scrollbars if the tooltip goes outside of the popup.

      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface,
      .mdc-dialog .mdc-dialog__content {
        overflow: visible;
      }

Alternatively, if you remove these sections, you lose the blur on the popup window and the coloring on the history graph chart, but the overflow and tooltips will work properly.

      @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
        .mdc-dialog__surface {
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          background-color: rgba(var(--rgb-mdc-theme-surface), .5) !important;
        }
      }
      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface,
      .mdc-dialog .mdc-dialog__content {
        overflow: visible;
      }
    ha-more-info-history$state-history-charts:
      $:
        state-history-chart-timeline$: |
          .chartTooltip {
            margin-top: -200px;
          }
    ha-more-info-info:
      $:
        ha-more-info-history:
          $: |
            state-history-charts, statistics-chart {
              filter: hue-rotate(calc(var(--hue-primary-color) - 212deg)) saturate(3) brightness(0.66)
            }
jsenecal commented 1 year ago

How about letting it overflow but hiding the scrollbars in a way similar to what I did here: https://github.com/netbox-community/netbox/blob/41d6caa5ef0c954eca18fdc3eef1f02be6648929/netbox/project-static/styles/netbox.scss#L112-L123 ?