Spaces:
Paused
Paused
scroll mobile + pop cutted
Browse files- app/page.tsx +1 -1
- assets/globals.css +3 -0
- components/form.tsx +2 -2
app/page.tsx
CHANGED
@@ -3,7 +3,7 @@ import Image from "next/image";
|
|
3 |
|
4 |
export default function Home() {
|
5 |
return (
|
6 |
-
<section className="
|
7 |
<Form>
|
8 |
<header>
|
9 |
<h1 className="text-white font-bold text-3xl">
|
|
|
3 |
|
4 |
export default function Home() {
|
5 |
return (
|
6 |
+
<section className="h-screen p-12 lg:p-24 bg-stone-950 relative z-[1] overflow-auto">
|
7 |
<Form>
|
8 |
<header>
|
9 |
<h1 className="text-white font-bold text-3xl">
|
assets/globals.css
CHANGED
@@ -15,6 +15,9 @@
|
|
15 |
--background-end-rgb: 0, 0, 0;
|
16 |
}
|
17 |
}
|
|
|
|
|
|
|
18 |
|
19 |
body {
|
20 |
color: rgb(var(--foreground-rgb));
|
|
|
15 |
--background-end-rgb: 0, 0, 0;
|
16 |
}
|
17 |
}
|
18 |
+
html, body {
|
19 |
+
@apply overflow-hidden h-screen;
|
20 |
+
}
|
21 |
|
22 |
body {
|
23 |
color: rgb(var(--foreground-rgb));
|
components/form.tsx
CHANGED
@@ -155,7 +155,7 @@ export const Form = ({ children }: { children: React.ReactNode }) => {
|
|
155 |
/>
|
156 |
</div>
|
157 |
<div>
|
158 |
-
<div className="w-full sticky top-
|
159 |
<div className="border rounded-xl p-6 bg-stone-900/40 border-white/5">
|
160 |
<p className="text-amber-200 font-semibold text-xs uppercase mb-3">
|
161 |
Generated prompt
|
@@ -227,7 +227,7 @@ export const Form = ({ children }: { children: React.ReactNode }) => {
|
|
227 |
</div>
|
228 |
<div
|
229 |
className={classNames(
|
230 |
-
"
|
231 |
{
|
232 |
"opacity-0 pointer-events-none translate-y-full": modelLoaded,
|
233 |
}
|
|
|
155 |
/>
|
156 |
</div>
|
157 |
<div>
|
158 |
+
<div className="w-full sticky top-0">
|
159 |
<div className="border rounded-xl p-6 bg-stone-900/40 border-white/5">
|
160 |
<p className="text-amber-200 font-semibold text-xs uppercase mb-3">
|
161 |
Generated prompt
|
|
|
227 |
</div>
|
228 |
<div
|
229 |
className={classNames(
|
230 |
+
"fixed right-10 bottom-10 w-full max-w-sm border rounded-xl p-6 bg-amber-900/10 border-white/10 overflow-hidden transition-all duration-200",
|
231 |
{
|
232 |
"opacity-0 pointer-events-none translate-y-full": modelLoaded,
|
233 |
}
|