Skip to content

fix: responsive form layouts, developer toolkit, and thread card overflow on mobile #2626

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

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

fix: responsive form layouts, developer toolkit, and thread card overflow on mobile #2626

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6dff914
fix: mobile form layouts
AbhiVarde Nov 24, 2025
a6ec155
fix: thread cards overflow on small screens
AbhiVarde Nov 24, 2025
4630e29
fix: remove undefined wrap-break-word utility class
AbhiVarde Nov 25, 2025
c4b898b
fix: use standard overflow-wrap instead of invalid word-break property
AbhiVarde Nov 25, 2025
f084273
fix: add unique key to tags loop for proper rendering
AbhiVarde Nov 25, 2025
32a06a2
fix: apply review feedback
AbhiVarde Nov 26, 2025
b9f1168
Merge branch 'main' into fix-2599-mobile-form-layouts
HarshMN2345 Nov 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
9 changes: 4 additions & 5 deletions src/routes/(marketing)/(components)/developers-toolkit.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
{#each build as product}
<a
href={product.href}
class="bg-smooth hover:bg-smooth/50 flex h-full w-fit items-center justify-center gap-2 rounded-full px-3 backdrop-blur-lg transition-opacity"
class="bg-smooth hover:bg-smooth/50 flex h-full w-fit items-center justify-center gap-2 rounded-full px-0.5 backdrop-blur-lg transition-opacity sm:px-1 md:px-2 lg:px-3"
>
<span
class="text-primary text-caption flex items-center justify-center gap-1 font-medium"
Expand All @@ -73,13 +73,12 @@
alt={product.label}
class="size-6"
/>
{product.label}
<span class="hidden lg:inline">{product.label}</span>
</span>
</a>
{/each}
</div>
</div>
<!-- dashed gap between groups (horizontal) -->
<div
aria-hidden="true"
class="mx-0 h-px w-6 self-center border-t border-dashed border-black/8"
Expand All @@ -93,7 +92,7 @@
{#each deploy as product}
<a
href={product.href}
class="bg-smooth hover:bg-smooth/50 flex h-full w-fit items-center justify-center gap-2 rounded-full px-3 backdrop-blur-lg transition-opacity"
class="bg-smooth hover:bg-smooth/50 flex h-full w-fit items-center justify-center gap-2 rounded-full px-0.5 backdrop-blur-lg transition-opacity sm:px-1 md:px-2 lg:px-3"
>
<span
class="text-primary text-caption flex items-center justify-center gap-1 font-medium"
Expand All @@ -104,7 +103,7 @@
alt={product.label}
class="size-6"
/>
{product.label}
<span class="hidden lg:inline">{product.label}</span>
</span>
</a>
{/each}
Expand Down
6 changes: 3 additions & 3 deletions src/routes/contact-us/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@
<form
method="post"
on:submit|preventDefault={handleSubmit}
class="flex flex-col gap-4"
class="mx-auto flex w-full max-w-xl flex-col gap-4"
>
<div class="flex justify-end">
<ul
Expand Down Expand Up @@ -192,7 +192,7 @@
</ul>
</div>
<div
class="web-u-flex-vertical-reverse-mobile flex justify-between gap-4"
class="web-u-flex-vertical-reverse-mobile mx-auto flex w-full max-w-xl justify-between gap-4"
>
<p class="text-caption web-u-max-width-380">
{#if error}
Expand All @@ -210,7 +210,7 @@
<Button
type="submit"
disabled={submitting}
class="web-u-inline-width-100-percent-mobile-break1 self-center"
class="w-full! self-center lg:w-auto!"
>
<span>Submit</span>
</Button>
Expand Down
9 changes: 5 additions & 4 deletions src/routes/startups/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,7 @@
<CaseStudiesLight />

<div id="form" class="web-white-section light overflow-hidden">
<div class=" relative pt-20 pb-8 md:pt-40 md:pb-30">
<div class="relative pt-20 pb-8 md:pt-40 md:pb-30">
<div class="relative">
<div class="relative container">
<!-- before submit -->
Expand Down Expand Up @@ -402,7 +402,7 @@
<form
method="post"
on:submit|preventDefault={handleSubmit}
class="flex flex-col gap-4"
class="mx-auto flex w-full max-w-xl flex-col gap-4"
>
<div class="flex justify-end">
<ul
Expand Down Expand Up @@ -458,11 +458,12 @@
</ul>
</div>
<div
class="web-u-flex-vertical-reverse-mobile flex justify-between gap-4"
class="web-u-flex-vertical-reverse-mobile mx-auto flex w-full max-w-xl justify-between gap-4"
>
<div class="flex flex-col gap-2">
<p class="text-caption text-secondary">
This form is protected by reCAPTCHA, and the Google <br
class="hidden sm:block"
/>
<a
href="https://policies.google.com/privacy"
Expand All @@ -484,7 +485,7 @@
<Button
type="submit"
disabled={submitting}
class="web-u-inline-width-100-percent-mobile-break1 self-center"
class="w-full! self-center lg:w-auto!"
>
Get Started
</Button>
Expand Down
40 changes: 31 additions & 9 deletions src/routes/threads/ThreadCard.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@

{#key highlightTerms}
<a href="/threads/{thread.discord_id}" class="web-card is-normal has-border-gradient thread">
<div class="flex gap-2">
<div class="flex min-w-0 gap-2">
<h3
class="text-main-body text-primary font-medium break-words"
class="text-main-body text-primary min-w-0 flex-1 font-medium"
use:highlight={highlightTerms}
>
{thread.title}
Expand All @@ -22,23 +22,23 @@
</div>

<p
class="web-main-body-500 u-margin-block-start-4 u-break-word"
class="web-main-body-500 u-margin-block-start-4 u-break-word min-w-0"
use:highlight={highlightTerms}
>
{sanitizeContent(thread.content)}
</p>

<div class="mt-4 flex justify-between gap-4">
<ul class="flex gap-2">
<div class="mt-4 flex min-w-0 flex-wrap justify-between gap-4">
<ul class="flex min-w-0 flex-wrap gap-2">
{#each thread.tags ?? [] as tag}
<li>
<div class="web-tag">{tag}</div>
<li class="min-w-0">
<div class="web-tag truncate">{tag}</div>
</li>
{/each}
</ul>

<div
class="web-icon-button is-more-content web-u-pointer-events-none flex items-center"
class="web-icon-button is-more-content web-u-pointer-events-none flex shrink-0 items-center"
aria-label="Replies"
>
<span class="web-icon-message web-u-font-size-16" aria-hidden="true"></span>
Expand All @@ -51,13 +51,28 @@
<style lang="scss">
.web-card {
padding: 1.25rem;
overflow: hidden;
}
.thread {
position: relative;
max-width: 100%;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
p: {
p {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
hyphens: auto;
}
h3 {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
hyphens: auto;
}
}
Expand All @@ -68,4 +83,11 @@
h3 {
margin-block-end: 0.25rem;
}
.web-tag {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>