Uploaded image for project: 'Magnolia UI'
  1. Magnolia UI
  2. MGNLUI-6688

Long labels are not split and dialogs look messy


    • Yes
    • Yes
    • Nucleus 36
    • 2
    • Yes

      Steps to reproduce

      1.  Modify one existing component to add a very long field label like: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"
      2.  Open the component dialog

      Expected results

      Long label is split and shown in different lines so the dialogs looks correctly

      Actual results

      The label is shown in one line and the dialog looks messy



      In some cases, shortening labels is an option; unfortunately, it is not.



      • The label should be short, and we limit characters to 25 
        • Add ... when text goes above this number of characters
      • When the text to be applied is long - use the tooltip instead  

        Acceptance criteria

          1. image-2023-04-28-10-02-37-387.png
            78 kB
            Adam Siska
          2. image-2023-04-28-10-04-52-964.png
            19 kB
            Adam Siska
          3. Screenshot 2021-04-21 at 15.41.51.png
            189 kB
            Jonathan Ayala

              thien.quach Quach Hao Thien
              jayala Jonathan Ayala
              0 Vote for this issue
              5 Start watching this issue

                Work Started:

                  Original Estimate - Not Specified
                  Not Specified
                  Remaining Estimate - Not Specified
                  Not Specified
                  Time Spent - 1d 5h
                  1d 5h