Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-85397

Adjust "adaptive report" styling dynamically based on the size of the parent container

XMLWordPrintable

    • 2
    • WP Sprint 2025-I2.0, WP Sprint 2025-I2.1 (Clones)

      Currently, the report style switches between "Card" and "Table" based on the browser width. This works well when the report is displayed using the full browser width. However, when the report is rendered inside a container with fixed or limited width, the style still changes based on the browser width, which leads to unintended behavior.

      To address this, we want the style switch between "Card" and "Table" to be based on the width of a parent container rather than the browser window.

      Suggested solution

      To use Container queries instead of Media queries

        1. (1) 5 Passed -- (Main)MDL-85397.png
          194 kB
          Kim Jared Lucas
        2. (1) 6 Passed -- (Main)MDL-85397.png
          86 kB
          Kim Jared Lucas
        3. (2) 7 Passed -- (Main)MDL-85397.png
          79 kB
          Kim Jared Lucas
        4. (2) 12 Passed -- (Main)MDL-85397.png
          337 kB
          Kim Jared Lucas
        5. (2) 8 Passed -- (Main)MDL-85397.png
          658 kB
          Kim Jared Lucas
        6. (2) 10 Passed -- (Main)MDL-85397.png
          830 kB
          Kim Jared Lucas
        7. (2) 6 Passed -- (Main)MDL-85397.png
          602 kB
          Kim Jared Lucas

            tasio.bertomeu@moodle.com Tasio Bertomeu
            tasio.bertomeu@moodle.com Tasio Bertomeu
            Paul Holden Paul Holden
            Mikel Martín Corrales Mikel Martín Corrales
            Kim Jared Lucas Kim Jared Lucas
            Votes:
            0 Vote for this issue
            Watchers:
            11 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 day, 6 hours, 47 minutes
                1d 6h 47m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.