diff --git a/apps/scandic-web/components/Lightbox/FullView/fullView.module.css b/apps/scandic-web/components/Lightbox/FullView/fullView.module.css
index 704776309..7c864cf27 100644
--- a/apps/scandic-web/components/Lightbox/FullView/fullView.module.css
+++ b/apps/scandic-web/components/Lightbox/FullView/fullView.module.css
@@ -1,7 +1,7 @@
.fullViewContainer {
background-color: var(--UI-Text-High-contrast);
height: 100%;
- padding: var(--Spacing-x3) var(--Spacing-x2);
+ padding: var(--Space-x3) var(--Space-x2);
position: relative;
align-items: center;
justify-items: center;
@@ -9,7 +9,7 @@
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr;
place-content: center;
- gap: var(--Spacing-x5);
+ gap: var(--Space-x5);
}
.closeButton {
@@ -37,7 +37,7 @@
width: 100%;
height: 100%;
max-height: 25rem;
- margin-bottom: var(--Spacing-x5);
+ margin-top: var(--Space-x5);
}
.imageWrapper {
@@ -52,10 +52,10 @@
object-fit: cover;
}
-.footer {
+.imageCaption {
color: var(--Text-Inverted);
position: absolute;
- bottom: calc(-1 * var(--Spacing-x5));
+ top: calc(-1 * var(--Space-x5));
}
@media screen and (max-width: 767px) {
@@ -66,7 +66,7 @@
@media screen and (min-width: 768px) and (max-width: 1366px) {
.fullViewContainer {
- padding: var(--Spacing-x5);
+ padding: var(--Space-x5);
}
.imageContainer {
@@ -78,13 +78,13 @@
@media screen and (min-width: 768px) {
.closeButton {
position: fixed;
- top: var(--Spacing-x-one-and-half);
- right: var(--Spacing-x-half);
+ top: var(--Space-x15);
+ right: var(--Space-x15);
}
.fullViewContainer {
margin-top: 0;
- padding: var(--Spacing-x5);
+ padding: var(--Space-x5);
grid-template-rows: auto 1fr auto;
width: 100%;
height: 100%;
@@ -117,10 +117,10 @@
}
.fullViewNextButton {
- right: var(--Spacing-x5);
+ right: var(--Space-x5);
}
.fullViewPrevButton {
- left: var(--Spacing-x5);
+ left: var(--Space-x5);
}
}
diff --git a/apps/scandic-web/components/Lightbox/FullView/index.tsx b/apps/scandic-web/components/Lightbox/FullView/index.tsx
index bd21c51e6..ab18fce32 100644
--- a/apps/scandic-web/components/Lightbox/FullView/index.tsx
+++ b/apps/scandic-web/components/Lightbox/FullView/index.tsx
@@ -88,6 +88,11 @@ export default function FullView({
drag="x"
onDragEnd={(_e, info) => handleSwipe(info.offset.x)}
>
+ {image.caption && !hideLabel ? (
+
+ {image.caption}
+
+ ) : null}
-
- {image.caption && !hideLabel ? (
-
- {image.caption}
-
- ) : null}