Skip to content

fix: layouts #119

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
merged 8 commits into from
May 5, 2025
Merged

fix: layouts #119

Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
bf27bd5
fix: layouts
grv-saini-20 Apr 29, 2025
678cf74
fix: Onboarding page scroll fixed
grv-saini-20 Apr 29, 2025
65f22d2
fix: page layout and prevent from scroll in all devices
grv-saini-20 Apr 29, 2025
7591d03
fix: pages layout
grv-saini-20 Apr 30, 2025
8dc49eb
chore: try to fix emulator
grv-saini-20 May 2, 2025
08e5ce0
fix: units
grv-saini-20 May 2, 2025
11eed06
fix: safezones for ios
grv-saini-20 May 2, 2025
2ade163
fix: styling
sosweetham May 2, 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
14 changes: 7 additions & 7 deletions infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@ const handleNext = async () => {
};
</script>

<main class="pt-[3vh] px-[5vw] pb-[4.5vh]">
<article class="flex justify-center mb-[4vh]">
<img class="aspect-square w-full object-cover" src="/images/Onboarding.svg" alt="Infographic card">
<main class="h-[100dvh] pt-[3dvh] px-[5vw] pb-[4.5dvh] bg-red-300">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

❓ Verification inconclusive

Add fallback for dvh units
Using 100dvh improves mobile resizing, but not all browsers support dynamic viewport units yet. Consider adding a vh fallback or a @supports rule. For example, via Tailwind you might write a custom CSS block:

.main {
  height: 100vh;
  height: 100dvh;
}

Add a vh fallback for dynamic viewport units
Some browsers don’t yet support dvh, so it’s safest to fall back to vh first and then override with dvh.

• File: infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte
Line 19

Suggested change:

- <main class="h-[100dvh] pt-[3dvh] px-[5vw] pb-[4.5dvh] bg-red-300">
+ <main class="h-[100vh] h-[100dvh] pt-[3dvh] px-[5vw] pb-[4.5dvh] bg-red-300">

Alternatively, you can use a feature query in your global CSS (or Tailwind @layer utilities):

.main {
  height: 100vh;
}
@supports (height: 100dvh) {
  .main {
    height: 100dvh;
  }
}

<article class="flex justify-center mb-[4dvh]">
<img class="w-[88vw] h-[39vh] rounded-2xl aspect-square object-cover" src="/images/Onboarding.svg" alt="Infographic card">
</article>
<section class="mb-[9.3vh]">
<section class="mb-[9.3dvh]">
<Hero
subtitle="Store your IDs, verify instantly with QR codes, and manage your digital identity with ease."
class="mb-4"
Expand All @@ -33,17 +33,17 @@ const handleNext = async () => {
</section>
<section>
<p class="max-w-[300px] mx-[auto] text-center small text-black-500">By continuing you agree to our <a href="/" class="text-primary underline underline-offset-5">Terms & Conditions </a> and <a href="/" class="text-primary underline underline-offset-5">privacy policy.</a></p>
<div class="flex justify-center whitespace-nowrap mt-[2vh]">
<div class="flex justify-center whitespace-nowrap mt-[2dvh]">
<ButtonAction class="w-full" callback={handleGetStarted}>Get Started</ButtonAction>
</div>
</section>
</main>

<Drawer bind:isPaneOpen>
<img src="/images/GetStarted.svg" alt="get-started">
<h4 class="mt-[2.3vh] mb-[0.5vh]">Welcome to Web 3 Data Spaces</h4>
<h4 class="mt-[2.3dvh] mb-[0.5dvh]">Welcome to Web 3 Data Spaces</h4>
<p class="text-black-700">Your eName is more than a name—it's your unique digital passport. One constant identifier that travels with you across the internet, connecting your real-world self to the digital universe.</p>
<div class="flex justify-center whitespace-nowrap my-[2.3vh]">
<div class="flex justify-center whitespace-nowrap my-[2.3dvh]">
<ButtonAction class="w-full" callback={handleNext}>Next</ButtonAction>
</div>
</Drawer>
Loading