scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: consolidate media queries to be consistent with ranges

Browse Source
This commit is contained in:
Christian Andolf
2025-04-09 12:09:57 +02:00
parent e6aa177e6f
commit ee72f58c33
13 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/scandic-web/components/Blocks/UspGrid/uspgrid.module.css
View File

@@ -9,7 +9,7 @@
align-content: start;
}
@media screen and (min-width: 767px) {
@media screen and (min-width: 768px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}

2
apps/scandic-web/components/Footer/Details/details.module.css
View File

@@ -56,7 +56,7 @@
gap: var(--Spacing-x1);
}
@media screen and (min-width: 767px) {
@media screen and (min-width: 768px) {
.details {
padding: var(--Spacing-x6) 0 var(--Spacing-x4);
}

2
apps/scandic-web/components/Footer/Navigation/SecondaryNav/secondarynav.module.css
View File

@@ -33,7 +33,7 @@
text-decoration: none;
}
@media screen and (min-width: 767px) {
@media screen and (min-width: 768px) {
.secondaryNavigation {
margin-top: var(--Spacing-x4);
gap: 120px;

2
apps/scandic-web/components/Footer/Navigation/navigation.module.css
View File

@@ -11,7 +11,7 @@
max-width: var(--max-width-page);
}
@media screen and (min-width: 767px) {
@media screen and (min-width: 768px) {
.section {
padding: var(--Spacing-x9) 0;
}

2
apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/booking-code.module.css
View File

@@ -71,7 +71,7 @@
}
}
@media screen and (min-width: 768px) and (max-width: 1367px) {
@media screen and (min-width: 768px) and (max-width: 1366px) {
.container {
display: flex;
}

2
apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx
View File

@@ -31,7 +31,7 @@ const invalidBookingCodeMsg = "Invalid booking code"
export default function BookingCode() {
const intl = useIntl()
const checkIsTablet = useMediaQuery(
"(min-width: 768px) and (max-width: 1367px)"
"(min-width: 768px) and (max-width: 1366px)"
)
const checkIsDesktop = useMediaQuery("(min-width: 1367px)")
const [isTablet, setIsTablet] = useState(false)

2
apps/scandic-web/components/Forms/BookingWidget/FormContent/formContent.module.css
View File

@@ -31,7 +31,7 @@
}
}
@media screen and (max-width: 1367px) {
@media screen and (max-width: 1366px) {
.inputContainer {
display: grid;
gap: var(--Spacing-x2);

2
apps/scandic-web/components/HotelReservation/HotelCardDialogListing/index.tsx
View File

@@ -29,7 +29,7 @@ export default function HotelCardDialogListing({
const activeCardRef = useRef<HTMLDivElement | null>(null)
const observerRef = useRef<IntersectionObserver | null>(null)
const dialogRef = useRef<HTMLDivElement>(null)
const isMobile = useMediaQuery("(max-width: 768px)")
const isMobile = useMediaQuery("(max-width: 767px)")
const { activeHotelCard, setActiveHotelCard, setActiveHotelPin } =
useHotelsMapStore()

2
apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/selectedRoomPanel.module.css
View File

@@ -33,7 +33,7 @@ div.selectedRoomPanel p.subtitle {
padding-bottom: var(--Spacing-x1);
}
@media screen and (max-width: 768px) {
@media screen and (max-width: 767px) {
.selectedRoomPanel {
gap: var(--Spacing-x1);
grid-template-areas: "image" "content";

2
apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/multiRoomWrapper.module.css
View File

@@ -48,7 +48,7 @@
display: none;
}
@media (max-width: 768px) {
@media (max-width: 767px) {
.roomContainer {
padding: var(--Spacing-x2);
}

2
apps/scandic-web/components/Lightbox/Lightbox.module.css
View File

@@ -199,7 +199,7 @@
.image {
object-fit: cover;
}
@media (min-width: 768px) and (max-width: 1367px) {
@media (min-width: 768px) and (max-width: 1366px) {
.fullViewContainer {
padding: var(--Spacing-x5);
}

2
apps/scandic-web/components/TempDesignSystem/Tooltip/tooltip.module.css
View File

@@ -142,7 +142,7 @@
border-color: transparent var(--UI-Text-Active) transparent transparent;
}
@media screen and (max-width: 768px) {
@media screen and (max-width: 767px) {
.tooltipContainer[data-active="true"] .tooltip {
visibility: visible;
opacity: 1;

2
apps/scandic-web/hooks/booking/useScrollToActiveSection.ts
View File

@@ -8,7 +8,7 @@ export default function useScrollToActiveSection(
steps: StepEnum[],
isActive: boolean
) {
const isMobile = useMediaQuery("(max-width: 768px)")
const isMobile = useMediaQuery("(max-width: 767px)")
const handleScroll = useCallback(() => {
if (!isMobile) {