6

frontend/src/styles.css

@@ -200,7 +200,6 @@ button.icon-button.ghost:hover:not([disabled]) {
   flex-direction: column;
   padding: 0.75rem 1.5rem 1.25rem;
   min-height: 0;
-  overflow: hidden;
 }
 
 .preview-workspace {
@@ -775,14 +774,17 @@ button.icon-button.ghost:hover:not([disabled]) {
   left: 50%;
   width: 100%;
   height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   transition: transform 120ms ease;
   filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
   transform-origin: center;
   border-radius: 6px;
   overflow: hidden;
+  pointer-events: none;
 }
 
-
 .preview-stack .preview-stack__item.orientation-portrait {
   width: 80%;
   height: 100%;
@@ -794,10 +796,31 @@ button.icon-button.ghost:hover:not([disabled]) {
 }
 
 .preview-stack__image {
-  width: 100%;
-  height: 100%;
+  display: block;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
   object-fit: contain;
   background: transparent;
+  cursor: pointer;
+  transition:
+    outline-color 120ms ease,
+    box-shadow 120ms ease,
+    filter 120ms ease,
+    background-color 120ms ease;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+  pointer-events: auto;
+}
+
+.preview-stack__image:hover,
+.preview-stack__image:focus-visible {
+  outline-color: rgba(24, 119, 242, 0.85);
+  box-shadow:
+    inset 0 0 0 999px rgba(24, 119, 242, 0.18),
+    0 6px 18px rgba(24, 119, 242, 0.24);
+  filter: saturate(118%) brightness(1.05);
 }
 
 .preview-pane--stack {