Fix broken responsive UI on Forum layout

Elanis

When using Discord on half a screen on a 1080p screen, with member list visible, every channel type renders correctly except forum thread list. 

Example:

It's a necessary fix for many people to use forums on their current window layout.

4

댓글

댓글 2개

날짜 투표수
  • Elanis
    • 편집된 시간

    I've written a patch for Stable 158183 (9ab8626) on my browser using a Chrome addon to override specific style rules, based on the minimal width discord client accepts to be.

    Global layout

    Replace min-width: 480px by min-width: 290px on selector .headerRow-1MKoR-, .list-3FIpnh>div:first-child

    Equivalents to this selector (first element only):
    - Xpath: //*[@id="app-mount"]/div[2]/div/div[1]/div/div[2]/div/div[1]/div/div/div[3]/div/div[1]/div/div

    - Full Xpath: /html/body/div[2]/div[2]/div/div[1]/div/div[2]/div/div[1]/div/div/div[3]/div/div[1]/div/div

    - Full selector: #app-mount > div.appDevToolsWrapper-1QxdQf > div > div.app-3xd6d0 > div > div.layers-OrUESM.layers-1YQhyW > div > div.container-1eFtFS > div > div > div.chat-2ZfjoI > div > div.container-3wLKDe > div > div

    ---

    Moderator hints layout

    Replace min-width: 480px by min-width: 290px on selector .container-2_J666

    Equivalents to this selector (first element only):
    - Xpath: //*[@id="app-mount"]/div[2]/div/div[1]/div/div[2]/div/div[1]/div/div/div[3]/div/div[1]/div/div/div[2]/div[4]

    - Full Xpath: /html/body/div[2]/div[2]/div/div[1]/div/div[2]/div/div[1]/div/div/div[3]/div/div[1]/div/div/div[2]/div[4]

    - Full selector: #app-mount > div.appDevToolsWrapper-1QxdQf > div > div.app-3xd6d0 > div > div.layers-OrUESM.layers-1YQhyW > div > div.container-1eFtFS > div > div > div.chat-2ZfjoI > div > div.container-3wLKDe > div > div > div.row-uezxzk.headerRow-1MKoR- > div.container-2_J666

    ---

    Remove max-height on .listContainer-3m1GAy (or set it to a high value, I tried with 2000px without problems)

    Equivalents to this selector (first element only):
    - Xpath: //*[@id="app-mount"]/div[2]/div/div[1]/div/div[2]/div/div[1]/div/div/div[3]/div/div[1]/div/div/div[2]/div[4]/div/div[2]

    - Full Xpath: /html/body/div[2]/div[2]/div/div[1]/div/div[2]/div/div[1]/div/div/div[3]/div/div[1]/div/div/div[2]/div[4]/div/div[2]

    - Full selector: #app-mount > div.appDevToolsWrapper-1QxdQf > div > div.app-3xd6d0 > div > div.layers-OrUESM.layers-1YQhyW > div > div.container-1eFtFS > div > div > div.chat-2ZfjoI > div > div.container-3wLKDe > div > div > div.row-uezxzk.headerRow-1MKoR- > div.container-2_J666 > div > div.listContainer-3m1GAy

    ---

    Result:


    Tried on multiple servers without problems

    1
  • Elanis

    1 year later, it's still broken

    0

댓글을 남기려면 로그인하세요.