Compact website mode

Fortrikka

A real compact mode needs to be added. Way too much space is wasted on gigantic white paddings, making me have to scroll unnecessarily.

Fortrikka

If you look at the picture, vertical white paddings take up almost 45% of browser real estate.

Fortrikka

I spent a minute making this picture, but:

Padding is more than 60% of all of the available vertical screen space.

Fortrikka

Any updates?

Vlad

Fortrikka Likely won't be updated as it seems that other users are fine with it.

Fortrikka

Perhaps could you change the title to "Compact website mode?" It may help to clarify the title if other people see it. Or is the title of the post hardlinked?

Fortrikka

@Vlad No hope for this? The entire website is in need of a compact mode. It's just a few css padding decreases. Also, could you please change the title to "Compact website mode"?

Vlad

Fortrikka Can you suggest the exact CSS change?

Fortrikka

First is this. Decreases about 5%?

Second is this. padding: 8px

As for the last, I don't know but the "like" button for the comment can be placed on the left below the profile picture, and the "reply" can be placed also below the profile picture to remove that gigantic <ul> element.

Fortrikka

Reduce the padding again from 8px to zero, warranting the following changes below to make it not look glitched.

Reduce the "NOfix tag" vertical and horizontal padding:

font-size of the tag icon(the one beside the
becomes 1em.

margin-top: 4px; added to make it down a bit more.

Margin bottom of above is reduced to 0.

Fortrikka

Margin of this element reduced to zero.

Fortrikka

.Button--link {
padding: 0px 8px;

}

Fortrikka

Now very compact.

Fortrikka

Finishing touch to remove the bottom.

Change to .CommentPost.votesAlternativeLayout.votesUpvotesOnly

min-height is now 104px to account for the two unordered list elements below the main paragraph.

Fortrikka

I may have changed a few things on top of the website unwittingly, so preferably all of these should get their own separate class names.

Fortrikka

Here is how it looks in complex discussions. Took around 15 minutes to get this working…

Vlad

Fortrikka Please aggregrate all suggestions in one suggested CSS so it can be copy/pasted and tested.

Fortrikka

.CommenPost.votesAlternativeLayout.votesUpvotesOnly	{
min-height: 104px;
}
.CommentPostPostAlternativeLayoutvotesUpvotesOnly {
padding: 8px;
}
.PostStream-item {
padding: 0px;
}
.TagLabel {
padding: .05em .2em;
}
.icon fas fa-tag EventPost-icon {
font-size: 1em;
margin-top: 4px;
}

.Post-header {
margin-bottom: 0px;
}

.Post-body p {
margin-bottom: 0px;
}

.Dropdown-toggle.Button.Button--icon.Button--flat {
padding: 0px;
}```

Vlad

Fortrikka Your settings should be active now.