fix: mobile layouts.

This commit is contained in:
Darshan
2025-03-28 11:38:24 +05:30
parent b21537795e
commit 6c8c3c5394
4 changed files with 32 additions and 4 deletions
@@ -107,7 +107,7 @@ APPWRITE_PUBLIC_ENDPOINT: "${sdk.forProject.client.config.endpoint}"
<Wizard title="Add Apple platform" bind:showExitModal confirmExit>
<Layout.Stack gap="xxl">
<!-- Step One -->
<Layout.Stack gap="l" direction="row">
<Layout.Stack gap="l" direction="row" class="platforms">
{#each Object.entries(platforms) as [key, value]}
<div class="u-width-full-line">
<!-- TODO: https://github.com/appwrite/pink/pull/248 for correct spacing -->
@@ -289,4 +289,12 @@ APPWRITE_PUBLIC_ENDPOINT: "${sdk.forProject.client.config.endpoint}"
padding: 16px;
}
}
:global(.platforms) {
@media (max-width: 768px) {
gap: var(--gap-l, 1rem);
display: grid !important;
grid-template-columns: repeat(2, 1fr);
}
}
</style>
@@ -164,7 +164,7 @@ static const String APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.e
<Wizard title="Add Flutter platform" bind:showExitModal confirmExit>
<Layout.Stack gap="xxl">
<!-- Step One -->
<Layout.Stack gap="l" direction="row">
<Layout.Stack gap="l" direction="row" class="platforms">
{#each Object.entries(platforms) as [key, value]}
<div class="u-width-full-line">
<!-- TODO: https://github.com/appwrite/pink/pull/248 for correct spacing -->
@@ -345,4 +345,12 @@ static const String APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.e
padding: 16px;
}
}
:global(.platforms) {
@media (max-width: 768px) {
gap: var(--gap-l, 1rem);
display: grid !important;
grid-template-columns: repeat(2, 1fr);
}
}
</style>
@@ -133,7 +133,7 @@ const APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}";
<Wizard title="Add React Native platform" bind:showExitModal confirmExit>
<Layout.Stack gap="xxl">
<!-- Step One -->
<Layout.Stack gap="l" direction="row">
<Layout.Stack gap="l" direction="row" class="platforms">
{#each Object.entries(platforms) as [key, value]}
<div class="u-width-full-line">
<!-- TODO: https://github.com/appwrite/pink/pull/248 for correct spacing -->
@@ -311,4 +311,12 @@ const APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}";
padding: 16px;
}
}
:global(.platforms) {
@media (max-width: 768px) {
gap: var(--gap-l, 1rem);
display: grid !important;
grid-template-columns: repeat(2, 1fr);
}
}
</style>
@@ -412,7 +412,11 @@ ${prefix}APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
.frameworks {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gap-l, 16px);
grid-template-columns: repeat(3, 1fr);
@media (max-width: 768px) {
grid-template-columns: repeat(2, 1fr);
}
}
</style>