I really like Piefed’s pace of development, featureset, and the responsiveness of the dev team, but I find the main UI a little lacking. Thanks to custom CSS I was able to tweak in the following:

• Use more screen real estate on larger viewports
• Fix height of posts, regardless of whether there’s an image/icon or not
• Fix size of link images and thumbnails to always be the same
• Anchor post options buttons to right and fix their order so you can quickly do a visual scan of replies and votes

I’m continually impressed by just how “flex” flexbox really is!

/* Use more width in larger viewports */  
.container-lg, .container-xl, .container-xxl {  
  max-width: 90% !important;  
}  

.col.post_teaser_body {  
  display: flex !important;  
  gap: 1rem !important;  
  align-items: flex-start !important;  
}  

/* Image in left column */  
.post_teaser_image_preview, .col_thumbnail {  
  order: -1 !important;  
  flex-shrink: 0 !important;  
  width: 160px !important;  
  height: 80px !important;  
  overflow: hidden !important;  
}  

/* New styles to anchor post_utilities_bar to the right */  
.post_utilities_bar {  
  display: flex !important;  
  flex-shrink: 0 !important;  
  justify-content: flex-end !important;  
  gap: 0 !important;  
  margin-left: auto !important;  
}  

/* Reorder the child elements */  
.cross_post_button { order: 1 !important; }  
.post_replies_link { order: 2 !important; }  
.voting_buttons_new { order: 3 !important; }  
.post_options_link { order: 4 !important; margin-left: auto !important; }  

/* Create a "virtual" right column using flex direction */  
.post_teaser_body > :not(.post_teaser_image_preview) {  
  flex: 1 !important;  
  min-width: 0 !important;  
  display: flex !important;  
  flex-direction: column !important;  
  gap: 0.3rem !important;  
  width: 100% !important;  
}  

/* Ensure the options dropdown stays properly aligned */  
.post_options_link.pull-right {  
  margin-left: 0 !important;  
}