FreshRSS mobile improvements

I have recently started using a self-hosted version of FreshRSS to aggregate RSS feeds. I love it, and the web version is pretty good, but the mobile version needed some work for my taste. I have used the Custom CSS and Custom JS extensions to make some minor adjustments:

Converted the article list into multiple lines.
Added some more space for the article summary.
Hide the fixed footer bar when scrolling.

Here is a before/after comparison:

Before / After Comparison

Custom CSS

Navigate to Configuration > Extensions.
Click the gears button next to Custom CSS. (Don’t forget to activate it.)
Paste the below.

.flux .flux_header .item .summary {
    /* Remove excessive white space from summary */
    white-space: normal; 
}
.flux .flux_header .item .item-element.bookmark {
    /* Remove ellipsis from bookmark/favourite icon */
    text-overflow: clip;
}
@media (max-width: 840px) {
    /* Set up layout */
    .flux .flux_header:has(.thumbnail):has(.summary) {
		display: grid;
		grid-template-columns: auto 1fr auto auto auto;
		grid-template-rows: auto auto;
		grid-template-areas:
			"website   website manage-read  manage-bookmark  manage-share  manage-labels  link"
			"thumbnail content content      content          content       content        content";
		align-items: start;
		list-style: none;
	}
	/** place all the elements in their respective template areas */
	.flux .flux_header:has(.thumbnail):has(.summary) li.website {
		grid-area: website;
	}
	.flux .flux_header:has(.thumbnail):has(.summary) li.thumbnail {
		grid-area: thumbnail;
	}
	.flux .flux_header:has(.thumbnail):has(.summary) li.titleAuthorSummaryDate {
		grid-area: content;
	}
	.flux .flux_header:has(.thumbnail):has(.summary) li.manage:has(.read) {
		grid-area: manage-read;
	}
	.flux .flux_header:has(.thumbnail):has(.summary) li.manage:has(.bookmark) {
		grid-area: manage-bookmark;
	}
	.flux .flux_header:has(.thumbnail):has(.summary) li.link {
		grid-area: link;
	}
	.flux .flux_header:has(.thumbnail):has(.summary) li.labels {
		grid-area: manage-labels
	}
	.flux .flux_header:has(.thumbnail):has(.summary) li.share {
		grid-area: manage-share
	}

	/** Show feed name */
	.flux .flux_header:has(.thumbnail):has(.summary) li.website {
		width: auto;
	}
	.flux .flux_header:has(.thumbnail):has(.summary) li.website .websiteName   {
		display: inline;
	}

    .flux .flux_header:has(.thumbnail):has(.summary) .item .summary {
        /* This now gives us space for a 3rd row in the summary */
        -webkit-line-clamp: 3;
    }

    /* Hide footer scrolling down */
    #nav_entries {
        transition: transform 0.3s ease;
    }
    body.scrolling-down #nav_entries {
        transform: translateY(100%);
    }

}

Custom JS

Paste the below into Custom JS. It’s just the bit needed to get the fixed footer hidden when scrolling down:

let lastY = 0;

window.addEventListener('scroll', () => {
  const y = window.scrollY;
  document.body.classList.toggle('scrolling-down', y > lastY && y > 80);
  lastY = y;
}, { passive: true });