Libreddit CSS-grids issue Topic is solved

For support with specific websites

Moderator: trava90

Forum rules
Please always mention the name/domain of the website in question in your topic title.
Please one website per topic thread (to help keep things organized). While behavior on different sites might at first glance seem similar, they are not necessarily caused by the same.

Please try to include any relevant output from the Toolkit Error Console or the Developer Tools Web Console using the following procedure:
  1. Clear any current output
  2. Navigate or refresh the page in question
  3. Copy and paste Errors or seemingly relevant Warnings into a single [ code ] block.
User avatar
Carl-Robert
Moongazer
Moongazer
Posts: 10
Joined: 2020-01-01, 15:46

Libreddit CSS-grids issue

Unread post by Carl-Robert » 2022-05-06, 03:18

The FOSS-front-end of Reddit, Libreddit, has visual corruption in Pale Moon (and Basilisk according to a GitHub issue, haven't tested it myself).

Relevant GitHub issue closed by Libreddit team: https://github.com/spikecodes/libreddit/issues/167
The developer there suggested the problem laying on CSS-grids.

Official Libreddit instances to use for testing (same issue obviously on other instances, but might as well test on official):
https://libreddit.spike.codes/
https://libredd.it/

Attached a screenshot of the graphical issues.
Attachments
libreddit.png

User avatar
FranklinDM
Add-ons Team
Add-ons Team
Posts: 570
Joined: 2017-01-14, 02:40
Location: Philippines
Contact:

Re: Libreddit CSS-grids issue

Unread post by FranklinDM » 2022-05-06, 04:08

They're using the min() CSS function in their grid template for each post, which UXP currently does not have support for.

Temporarily, you may opt to use the following user style:

Code: Select all

@-moz-document domain("libredd.it"), domain("libreddit.spike.codes") {
  .post {
    border-radius: 5px;
    background: var(--post);
    box-shadow: var(--shadow);
    display: grid;
    transition: 0.2s background;
    grid-template: 	"post_score post_header post_thumbnail" auto
        "post_score post_title  post_thumbnail" 1fr
        "post_score post_media  post_thumbnail" auto
        "post_score post_body   post_thumbnail" auto
        "post_score post_notification post_thumbnail" auto
        "post_score post_footer post_thumbnail" auto
        / minmax(40px, auto) minmax(0, 1fr) fit-content(152px);
  }
}

User avatar
Carl-Robert
Moongazer
Moongazer
Posts: 10
Joined: 2020-01-01, 15:46

Re: Libreddit CSS-grids issue (partially resolved)

Unread post by Carl-Robert » 2022-05-07, 04:09

Thank you, FranklinDM. I've tested that snippet in my userContent.css and it works just fine!

EDIT: Seems I celebrated prematurely. This css snippet hides the embedded videos from posts. Example-link to a random video from r/popular: https://libredd.it/r/CrazyFuckingVideos ... ght_there/

Without the css snippet the content is all bunched up, but the video player is technically there even if tiny sized. With the css snippet the whole media player is hidden from sight.

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 35403
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: Libreddit CSS-grids issue

Unread post by Moonchild » 2022-05-07, 07:39

Reported on their github as an issue: https://github.com/spikecodes/libreddit/issues/502
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

User avatar
FranklinDM
Add-ons Team
Add-ons Team
Posts: 570
Joined: 2017-01-14, 02:40
Location: Philippines
Contact:

Re: Libreddit CSS-grids issue (partially resolved)

Unread post by FranklinDM » 2022-05-07, 11:07

Carl-Robert wrote:
2022-05-07, 04:09
This css snippet hides the embedded videos from posts.
Try this one:

Code: Select all

@-moz-document domain("libredd.it"), domain("libreddit.spike.codes") {
  @media screen and (max-width: 480px) {
    .post {
      grid-template: 	"post_header post_header post_thumbnail" auto
                      "post_title  post_title  post_thumbnail" 1fr
                      "post_media  post_media  post_thumbnail" auto
                      "post_body   post_body   post_thumbnail" auto
                      "post_notification post_notification post_thumbnail" auto
                      "post_score  post_footer post_thumbnail" auto
                      / auto 1fr fit-content(152px);
    }
  }

  .post {
    border-radius: 5px;
    background: var(--post);
    box-shadow: var(--shadow);
    display: grid;
    transition: 0.2s background;
    grid-template: 	"post_score post_header post_thumbnail" auto
        "post_score post_title  post_thumbnail" 1fr
        "post_score post_media  post_thumbnail" auto
        "post_score post_body   post_thumbnail" auto
        "post_score post_notification post_thumbnail" auto
        "post_score post_footer post_thumbnail" auto
        / minmax(40px, auto) minmax(0, 1fr) fit-content(152px);
  }

  .post_media_video.short,
  .post_media_image.short svg,
  .post_media_image.short img {
    width: -moz-max-content;
  }
  
  #user, #subreddit, #sidebar {
    height: -moz-max-content;
  }
}

User avatar
Carl-Robert
Moongazer
Moongazer
Posts: 10
Joined: 2020-01-01, 15:46

Re: Libreddit CSS-grids issue

Unread post by Carl-Robert » 2022-05-08, 21:28

No luck with the updated CSS, looks the same (hidden player).

User avatar
FranklinDM
Add-ons Team
Add-ons Team
Posts: 570
Joined: 2017-01-14, 02:40
Location: Philippines
Contact:

Re: Libreddit CSS-grids issue

Unread post by FranklinDM » 2022-05-09, 03:09

This should (hopefully) force the video/image containers to use the content width:

Code: Select all

@-moz-document domain("libredd.it"), domain("libreddit.spike.codes") {
  @media screen and (max-width: 480px) {
    .post {
      grid-template: 	"post_header post_header post_thumbnail" auto
                      "post_title  post_title  post_thumbnail" 1fr
                      "post_media  post_media  post_thumbnail" auto
                      "post_body   post_body   post_thumbnail" auto
                      "post_notification post_notification post_thumbnail" auto
                      "post_score  post_footer post_thumbnail" auto
                      / auto 1fr fit-content(152px);
    }
  }

  .post {
    border-radius: 5px;
    background: var(--post);
    box-shadow: var(--shadow);
    display: grid;
    transition: 0.2s background;
    grid-template: 	"post_score post_header post_thumbnail" auto
        "post_score post_title  post_thumbnail" 1fr
        "post_score post_media  post_thumbnail" auto
        "post_score post_body   post_thumbnail" auto
        "post_score post_notification post_thumbnail" auto
        "post_score post_footer post_thumbnail" auto
        / minmax(40px, auto) minmax(0, 1fr) fit-content(152px);
  }

  .post_media_video,
  .post_media_image svg,
  .post_media_image img {
    width: -moz-max-content !important;
  }
  
  #user, #subreddit, #sidebar {
    height: -moz-max-content;
  }
}

User avatar
Carl-Robert
Moongazer
Moongazer
Posts: 10
Joined: 2020-01-01, 15:46

Re: Libreddit CSS-grids issue

Unread post by Carl-Robert » 2022-05-09, 07:12

Thanks, the new snippet works perfectly!

Locked