Skip to content

style: update log component styles #5202

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
idoshamun merged 5 commits into from
Dec 28, 2025
Merged

style: update log component styles #5202

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6d13e79
style: update log component styles
idoshamun Dec 23, 2025
1db7976
Merge branch 'main' into card-share-fix
rebelchris Dec 24, 2025
e49cb54
style: enhance desktop media queries for log component to prevent con…
idoshamun Dec 28, 2025
749b4f4
Merge branch 'main' into card-share-fix
idoshamun Dec 28, 2025
b7f3786
refactor: uncomment the 404 for log
idoshamun Dec 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 24 additions & 7 deletions packages/webapp/components/log/Log.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,13 @@
}

/* Desktop breakpoint - larger text for bigger screens */
@media (min-width: 1024px) {
/* Requires both width AND height to prevent truncation on shorter windows */
@media (min-width: 1024px) and (min-height: 960px) {
.header {
padding: 0.5rem 1rem;
gap: 0.5rem;
}

.cardInner {
max-width: 560px;
}
Expand Down Expand Up @@ -193,6 +199,13 @@
}
}

/* Desktop width with shorter height - use moderate sizing */
@media (min-width: 1024px) and (max-height: 959px) {
.cardInner {
max-width: 480px;
}
}

/* ========================================
HEADER - Logo & Progress Bars
======================================== */
Expand Down Expand Up @@ -2918,6 +2931,9 @@
2px 2px 0 var(--fest-primary, #FF8E3B),
4px 4px 0 var(--fest-accent, #CE3DF3);
margin-bottom: 0.5rem;
white-space: nowrap;
overflow: visible;
flex-shrink: 0;
}

.shareOfficialText {
Expand Down Expand Up @@ -3416,8 +3432,8 @@
}
}

/* Desktop enhancements */
@media (min-width: 1024px) {
/* Desktop enhancements - requires sufficient height */
@media (min-width: 1024px) and (min-height: 960px) {
.shareOfficialStamp {
padding: 0.625rem 2rem;
}
Expand Down Expand Up @@ -4354,9 +4370,10 @@

/* ========================================
DESKTOP BREAKPOINT - Larger text for bigger screens
Requires both width AND height to prevent content truncation
======================================== */

@media (min-width: 1024px) {
@media (min-width: 1024px) and (min-height: 960px) {
/* Clock (When You Read card) */
.clockFace {
width: 200px;
Expand Down Expand Up @@ -4946,8 +4963,8 @@
}
}

/* Desktop */
@media (min-width: 1024px) {
/* Desktop - requires sufficient height */
@media (min-width: 1024px) and (min-height: 960px) {
.archetypeBanner {
gap: 1.125rem;
padding: 1rem 1.5rem;
Expand Down Expand Up @@ -5025,7 +5042,7 @@
}
}

@media (min-width: 1024px) {
@media (min-width: 1024px) and (min-height: 960px) {
.noDataCtaButton {
padding: 1.25rem 3rem;
font-size: 1rem;
Expand Down