Experimental Threads-like media proportions, if the height is tall, s…

…how smaller media: https://mementomori.social/@rolle/111715197571142727

CHANGELOG.md

@@ -1,4 +1,4 @@
-### 2.0.0rc3: 2023-12-30
+### 2.0.0rc3: 2024-01-07
 
 * Prepare for 4.3.0 release with SVG icons
 * Add icon support for new SVG icons, replace icons for Home, Notifications, Explore, Live feeds, Private mentions, bookmarks, Favorites, Preferences and Lists
@@ -25,6 +25,7 @@
 * Add styles for the new /start onboarding on 4.3.0
 * Improve modal icon size and accessibility
 * Profile lock icon alignment fix, show it on the same level
+* Experimental Threads-like media proportions, if the height is tall, show smaller media: https://mementomori.social/@rolle/111715197571142727
 
 ### 1.8.3: 2023-11-12
 

layout-multiple-columns.css

@@ -1520,6 +1520,44 @@ body.embed .detailed-status,
   aspect-ratio: unset !important;
 }
 
+/* Start: Experimental Threads-like media proportions, if the height is tall, show smaller media: https://mementomori.social/@rolle/111715197571142727 */
+.layout-multiple-columns .media-gallery__item.standalone img,
+.layout-multiple-columns .video-player .media-gallery__preview {
+  object-fit: contain;
+}
+
+.layout-multiple-columns .status .audio-player,
+.layout-multiple-columns .status .media-gallery,
+.layout-multiple-columns .status .video-player,
+.layout-multiple-columns .audio-player,
+.layout-multiple-columns .media-gallery,
+.layout-multiple-columns .media-gallery__gifv,
+.layout-multiple-columns .media-gallery__preview,
+.layout-multiple-columns .video-player {
+  margin-left: calc(var(--size-avatar) + var(--gap-default));
+  max-height: 430px;
+  /* stylelint-disable-next-line */
+  width: unset !important;
+}
+
+.layout-multiple-columns .spoiler-button + .media-gallery__item > .media-gallery__preview {
+  /* stylelint-disable-next-line */
+  margin-left: unset !important;
+  /* stylelint-disable-next-line */
+  max-height: unset !important;
+  /* stylelint-disable-next-line */
+  width: 100% !important;
+}
+
+.layout-multiple-columns .detailed-status .audio-player,
+.layout-multiple-columns .detailed-status .media-gallery,
+.layout-multiple-columns .detailed-status .media-gallery__gifv,
+.layout-multiple-columns .detailed-status .media-gallery__preview,
+.layout-multiple-columns .detailed-status .video-player {
+  margin-left: 0;
+}
+
+/* End: Experimental Threads-like media proportions, if the height is tall, show smaller media */
 .layout-multiple-columns .status .status-card {
   margin-left: calc(var(--size-avatar) + var(--gap-default));
 }

layout-single-column.css

@@ -1529,6 +1529,44 @@ body.embed .detailed-status__display-avatar > img,
   aspect-ratio: unset !important;
 }
 
+/* Start: Experimental Threads-like media proportions, if the height is tall, show smaller media: https://mementomori.social/@rolle/111715197571142727 */
+.layout-single-column .media-gallery__item.standalone img,
+.layout-single-column .video-player .media-gallery__preview {
+  object-fit: contain;
+}
+
+.layout-single-column .status .audio-player,
+.layout-single-column .status .media-gallery,
+.layout-single-column .status .video-player,
+.layout-single-column .audio-player,
+.layout-single-column .media-gallery,
+.layout-single-column .media-gallery__gifv,
+.layout-single-column .media-gallery__preview,
+.layout-single-column .video-player {
+  margin-left: calc(var(--size-avatar) + var(--gap-default));
+  max-height: 430px;
+  /* stylelint-disable-next-line */
+  width: unset !important;
+}
+
+.layout-single-column .spoiler-button + .media-gallery__item > .media-gallery__preview {
+  /* stylelint-disable-next-line */
+  margin-left: unset !important;
+  /* stylelint-disable-next-line */
+  max-height: unset !important;
+  /* stylelint-disable-next-line */
+  width: 100% !important;
+}
+
+.layout-single-column .detailed-status .audio-player,
+.layout-single-column .detailed-status .media-gallery,
+.layout-single-column .detailed-status .media-gallery__gifv,
+.layout-single-column .detailed-status .media-gallery__preview,
+.layout-single-column .detailed-status .video-player {
+  margin-left: 0;
+}
+
+/* End: Experimental Threads-like media proportions, if the height is tall, show smaller media */
 .layout-single-column .status .status-card {
   margin-left: calc(var(--size-avatar) + var(--gap-default));
 }