Fix picture in picture media border radius and margin

ronilaukkarinen · Jan 7, 2024 · 400ae77 · 400ae77
1 parent d5dcfd4
commit 400ae77
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -26,6 +26,8 @@
 * 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
+* Fix picture in picture footer visibility
+* Fix picture in picture media border radius and margin
 
 ### 1.8.3: 2023-11-12
 

diff --git a/layout-multiple-columns.css b/layout-multiple-columns.css
@@ -489,10 +489,19 @@ body.layout-multiple-columns {
 }
 
 /* Hide footer buttons in modals */
-.layout-multiple-columns .media-modal__overlay .picture-in-picture__footer {
+.layout-multiple-columns .picture-in-picture .picture-in-picture__footer {
   display: none;
 }
 
+/* Picture in picture fixes */
+.layout-multiple-columns .picture-in-picture .audio-player,
+.layout-multiple-columns .picture-in-picture .video-player {
+  /* stylelint-disable-next-line */
+  border-radius: 0 !important;
+  /* stylelint-disable-next-line */
+  margin-left: 0 !important;
+}
+
 /* Report modal */
 .layout-multiple-columns .report-dialog-modal .poll__option.dialog-option > .poll__option__text {
   display: grid;

diff --git a/layout-single-column.css b/layout-single-column.css
@@ -497,10 +497,19 @@ body.layout-single-column {
 }
 
 /* Hide footer buttons in modals */
-.layout-single-column .media-modal__overlay .picture-in-picture__footer {
+.layout-single-column .picture-in-picture .picture-in-picture__footer {
   display: none;
 }
 
+/* Picture in picture fixes */
+.layout-single-column .picture-in-picture .audio-player,
+.layout-single-column .picture-in-picture .video-player {
+  /* stylelint-disable-next-line */
+  border-radius: 0 !important;
+  /* stylelint-disable-next-line */
+  margin-left: 0 !important;
+}
+
 /* Report modal */
 .layout-single-column .report-dialog-modal .poll__option.dialog-option > .poll__option__text {
   display: grid;