Uploaded image for project: 'MusicBrainz Server'
  1. MusicBrainz Server
  2. MBS-8093

Edit forms and dialogs should be sized relative to window/screen size

    XMLWordPrintable

    Details

    • Type: Improvement
    • Status: Open
    • Priority: Normal
    • Resolution: Unresolved
    • Affects Version/s: None
    • Fix Version/s: None
    • Labels:
      None

      Description

      We currently use absolute pixel numbers for several interface elements, which doesn't scale well across devices with different resolutions and window/screen sizes. Manually adjusting these values is inflexible and sometimes leads to unwanted rendering differences, see the attached images. There, div.half-width class is hardcoded to always have a width of 540px, despite what the name suggests.

      In MBS-7810, nikki complains that a div.half-width column is unnecessarily narrow on her screen, though I disagree with her suggested solution. On the other hand, in MBS-7932, the same class is too wide for a dialog window that also has a fixed size.

      We can't solve both of them just by setting a fix width for the class, which leaves us with these options:

      • Use relative units to define element size, such as percent or em. Avoid absolute units, such as pixels, wherever possible.
      • Use CSS media queries to define separate styles for different devices and window/screen sizes

        Attachments

        1. browserdiff.png
          browserdiff.png
          79 kB
        2. SAEKnIB.png
          SAEKnIB.png
          44 kB

          Issue Links

            Activity

              People

              • Assignee:
                Unassigned
                Reporter:
                krscuan KRSCuan
              • Votes:
                0 Vote for this issue
                Watchers:
                1 Start watching this issue

                Dates

                • Created:
                  Updated:

                  Packages

                  Version Package