diff --git a/src/card.ts b/src/card.ts
index 419064d0..4b3529a9 100644
--- a/src/card.ts
+++ b/src/card.ts
@@ -1749,6 +1749,7 @@ export class FrigateCard extends LitElement {
       this._getConfig().menu.position === 'top';
 
     return html` <ha-card
+      id="ha-card"
       .actionHandler=${actionHandler({
         hasHold: frigateCardHasAction(actions.hold_action),
         hasDoubleClick: frigateCardHasAction(actions.double_tap_action),
diff --git a/src/components/timeline.ts b/src/components/timeline.ts
index b75a37a4..ace18398 100644
--- a/src/components/timeline.ts
+++ b/src/components/timeline.ts
@@ -1089,7 +1089,7 @@ export class FrigateCardTimelineCore extends LitElement {
       : this._getStartEnd();
 
     const [prefetchStart, prefetchEnd] = this._getPrefetchWindow(windowStart, windowEnd);
-    await this._data.fetchIfNecessary(
+    const fetched = await this._data.fetchIfNecessary(
       this,
       this.hass,
       this.cameras,
@@ -1145,16 +1145,17 @@ export class FrigateCardTimelineCore extends LitElement {
       this._timeline.setWindow(windowStart, windowEnd);
     }
 
-    // Compare last date of fetch with that of inbound view to avoid a loop.
-    // Without this comparison it would be:
+    // Only generate thumbnails if an actual fetch occurred, to avoid getting
+    // stuck in a loop (the subsequent fetches will not actually fetch since the
+    // data will have been cached).
     //
     // Timeline receives a new `view`
     //  -> Events fetched
     //    -> Thumbnails generated
     //      -> New view dispatched (to load thumbnails into outer carousel).
     //  -> New view received ... [loop]
-    const currentContext = this.view.context as TimelineViewContext | null;
-    if (!isEqual(currentContext?.dateFetch, this._data.lastFetchDate)) {
+
+    if (fetched) {
       const thumbnails = this._generateThumbnails();
       this.view
         ?.evolve({
diff --git a/src/scss/card.scss b/src/scss/card.scss
index 9f275adf..65e2ef78 100644
--- a/src/scss/card.scss
+++ b/src/scss/card.scss
@@ -57,10 +57,6 @@ div.main::-webkit-scrollbar {
 frigate-card-menu[data-style='hover'] {
   z-index: 1;
   transition: opacity 0.5s ease;
-
-  // In hover mode, the full menu is responsive to the pointer (prevents the
-  // hover menu from disappearing when the cursor is between buttons).
-  pointer-events: all;
 }
 
 .main + frigate-card-menu[data-style='hover'] {
@@ -99,11 +95,14 @@ frigate-card-live.hidden {
 
   // Hide corners on Safari fullscreen.
   border-radius: 0px;
+  margin: 0;
 }
 :host(:fullscreen) ha-card {
   @include fullscreen-ha-card;
 }
-:host(:-webkit-full-screen) ha-card {
+// Need to use an id selector here to overcome card styling that is incorrectly
+// shown in Safari that causes the wrong margin to apply in fullscreen mode.
+:host(:-webkit-full-screen) #ha-card {
   @include fullscreen-ha-card;
 }
 :host(:-moz-full-screen) ha-card {
diff --git a/src/scss/timeline-core.scss b/src/scss/timeline-core.scss
index dcdad36f..f83a47e1 100644
--- a/src/scss/timeline-core.scss
+++ b/src/scss/timeline-core.scss
@@ -54,6 +54,14 @@ div.timeline.right-margin {
   background: none;
   color: var(--primary-text-color);
   background-color: var(--primary-color);
+
+  transition: background-color ease-in-out 1s, border-color ease-in-out 1s,
+    box-shadow ease-in-out 1s;
+}
+.vis-item.vis-selected {
+  border-color: var(--accent-color);
+  background-color: var(--accent-color);
+  box-shadow: 0px 0px 5px 1px var(--primary-color);
 }
 .vis-item.vis-background {
   background-color: var(--primary-color);
@@ -92,7 +100,8 @@ div.timeline.right-margin {
 }
 
 // Give an indication that the user can interact with the axes.
-.vis-text.vis-minor, .vis-label {
+.vis-text.vis-minor,
+.vis-label {
   transition: background-color 0.5s ease-out;
 }
 :host([recordings]) .vis-text.vis-minor:hover,