fixed:quickstart page responsiveness #95
Conversation
|
@theajmalrazaq is attempting to deploy a commit to the tscircuit Team on Vercel. A member of the Team first needs to authorize it. |
|
@seveibar Done!! |
|
So it looks like youve changed the design on lg screens. im mobile today so its harder to check work. Can you introduce a playwright snapshot test (see playwright-tests directory) for xs, md and lg sizes. This will also benefit the project because others will need to show their snapshot for future modifications |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 1 Skipped Deployment
|
|
@seveibar, this is how it looks on both devices. On large devices, there will be 3 columns, and on mobile, there will be 1 column. Furthermore, I am working on Playwright tests for 3 screen sizes: large, medium, and extra small, and I’m fixing the AI page UI. I will create their PR tomorrow. Also, I will work on setting the screen to ensure it is fixed across mobile. With all these updates, issue #25 will be closed. For now, please merge this.
|
src/pages/quickstart.tsx
Outdated
| @@ -159,11 +161,13 @@ export const QuickstartPage = () => { | |||
| <h2 className="text-xl font-semibold mb-4 mt-12"> | |||
| Start from a Template | |||
| </h2> | |||
| <div className="grid grid-cols-3 gap-4"> | |||
| <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> | |||
There was a problem hiding this comment.
| <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4"> |
src/pages/quickstart.tsx
Outdated
| @@ -73,14 +73,16 @@ export const QuickstartPage = () => { | |||
|
|
|||
| <div className="mb-8"> | |||
| <h2 className="text-xl font-semibold mb-4">Start Blank Snippet</h2> | |||
| <div className="grid grid-cols-4 gap-4"> | |||
| <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> | |||
There was a problem hiding this comment.
| <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4"> |
src/pages/quickstart.tsx
Outdated
| @@ -46,7 +46,7 @@ export const QuickstartPage = () => { | |||
| {isLoading ? ( | |||
| <div>Loading...</div> | |||
| ) : ( | |||
| <div className="grid grid-cols-4 gap-4"> | |||
| <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> | |||
There was a problem hiding this comment.
| <div className="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4"> |
|
@seveibar doing it right away. |
|
@seveibar Done with this! |
just fixed the quickstart page responsivess it is subpart of issue #25:mobile view is broken
