Tweak retain_definitely to work wide the newer thumbnails.

src/scss/drawer.scss

@@ -38,6 +38,12 @@ ha-icon.control {
   padding-bottom: $drawer-padding-extend;
 }
 
+:host([open]) ha-icon.control {
+  // When the drawer is open make the button to close it more prominent.
+  opacity: 1;
+  background-color: black;
+}
+
 :host([location='left']) ha-icon.control {
   border-top-right-radius: $drawer-icon-size;
   border-bottom-right-radius: $drawer-icon-size;

src/scss/gallery.scss

@@ -1,16 +1,21 @@
-@use "@material/image-list/mdc-image-list";
-@use "@material/image-list";
+@use '@material/image-list/mdc-image-list';
+@use '@material/image-list';
+@use 'thumbnail';
 
 :host {
   display: block;
   width: 100%;
   height: 100%;
   overflow: auto;
-  -ms-overflow-style: none; /* Hide scrollbar: IE and Edge */
-  scrollbar-width: none;    /* Hide scrollbar: Firefox */
+
+  // Hide scrollbar: IE and Edge
+  -ms-overflow-style: none;
+
+  // Hide scrollbar: Firefox
+  scrollbar-width: none;
 }
 
-/* Hide scrollbar for Chrome, Safari and Opera */
+// Hide scrollbar for Chrome, Safari and Opera
 :host::-webkit-scrollbar {
   display: none;
 }
@@ -44,12 +49,7 @@ ha-card.frigate-card-gallery-folder {
   height: 100%;
   line-height: 1;
 }
-.favorite {
-  position: absolute;
-  transform: translate(-50%, -50%);
-  height: 24px;
-  width: 24px;
-  top: 10%;
-  left: 90%;
-  color: yellow;
-}
+
+@include thumbnail.thumbnail-favorite() {
+  opacity: 0.8;
+} ;

src/scss/thumbnail.scss

@@ -54,12 +54,13 @@ span.heading {
   font-weight: bold;
 }
 
-.favorite {
-  position: absolute;
-  transform: translate(-50%, -50%);
-  height: 24px;
-  width: 24px;
-  top: 12%;
-  left: 90%;
-  color: yellow;
-}
+@mixin thumbnail-favorite() {
+  ha-icon.favorite {
+    position: absolute;
+    color: var(--primary-color);
+    padding: 2px;
+    @content;
+  } 
+}
+
+@include thumbnail-favorite()