Skip to content

Make forms and few other UI responsive #174

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 3 commits into from
May 24, 2025
+23 −23
Merged

Make forms and few other UI responsive #174

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
49aed05
Make forms responsive
wzulfikar Apr 22, 2025
4db6ff5
Dashboard cards responsive from lg
wzulfikar Apr 22, 2025
dd6c7ce
Unsqueeze template and action cards
wzulfikar Apr 22, 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
6 changes: 3 additions & 3 deletions packages/dashboard/src/components/Input/MarkdownEditor/Editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -711,8 +711,8 @@ export default function Editor({ value, onChange, mode, modeSwitcher }: Markdown
</div>
</div>
<>
<div className={"prose prose-sm prose-neutral space-y-4 break-words p-4"}>
<div className={"w-full"} style={{ width: "600px" }}>
<div className={"prose prose-sm prose-neutral space-y-4 break-words p-4 w-full"}>
<div className={"w-full lg:w-[600px]"}>
Comment on lines +714 to +715
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Only set the fixed width for large screen so the editor content doesn't overflow in small screen

Before:

image

After:

image

<EditorContent editor={editor} />
<EditorBubbleMenu
editor={editor}
Expand All @@ -739,7 +739,7 @@ export default function Editor({ value, onChange, mode, modeSwitcher }: Markdown
</>
) : (
<>
<div className={"mb-3 grid gap-3 md:grid-cols-1"}>
<div className={"mb-3 sm:grid sm:gap-3 md:grid-cols-1"}>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Before:

image

After:

image

<div>
<label className="block text-sm font-medium text-neutral-700">Email Body</label>
<div className="mt-1 h-full">
Expand Down
2 changes: 1 addition & 1 deletion packages/dashboard/src/pages/actions/[id].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -415,7 +415,7 @@ export default function Index() {
return router.push("/actions");
}}
className={
"flex w-full justify-center rounded border border-neutral-300 bg-white px-6 py-2 text-base font-medium text-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
"flex w-fit justify-center rounded border border-neutral-300 bg-white px-6 py-2 text-base font-medium text-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Cancel button can go too wide in certain screen size making it looks weird. I applied the same treatment for other cancel buttons.

Before:

image image

After:

image image

}
>
Cancel
Expand Down
2 changes: 1 addition & 1 deletion packages/dashboard/src/pages/actions/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export default function Index() {
{actions ? (
actions.length > 0 ? (
<>
<div className={"grid grid-cols-1 gap-6 sm:grid-cols-2"}>
<div className={"grid grid-cols-1 gap-6 lg:grid-cols-2"}>
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Action and Template cards are squeezed in medium screens. Changed from sm to lg to fix it.

Before:

ResponsivelyApp 2025-04-22 1 06 23 PM

After:

Opera 2025-04-22 1 05 42 PM

{actions
.sort((a, b) => {
if (a.name < b.name) {
Expand Down
2 changes: 1 addition & 1 deletion packages/dashboard/src/pages/actions/new.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -305,7 +305,7 @@ export default function Index() {
return router.push("/actions");
}}
className={
"flex w-full justify-center rounded border border-neutral-300 bg-white px-6 py-2 text-base font-medium text-neutral-700 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
"flex w-fit justify-center rounded border border-neutral-300 bg-white px-6 py-2 text-base font-medium text-neutral-700 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
}
>
Cancel
Expand Down
4 changes: 2 additions & 2 deletions packages/dashboard/src/pages/campaigns/[id].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -422,7 +422,7 @@ export default function Index() {
</>
}
>
<form onSubmit={handleSubmit(update)} className="space-6 grid gap-6 sm:grid-cols-6">
<form onSubmit={handleSubmit(update)} className="space-y-6 sm:space-y-0 sm:space-6 sm:grid sm:gap-6 sm:grid-cols-6">
<div className={"sm:col-span-6 grid sm:grid-cols-6 gap-6"}>
<Input
className={"sm:col-span-6"}
Expand Down Expand Up @@ -874,7 +874,7 @@ export default function Index() {
</AnimatePresence>
</div>

<div className={"ml-auto mt-6 flex justify-end gap-x-5 sm:col-span-6"}>
<div className={"ml-auto mt-6 sm:flex justify-end sm:gap-x-5 sm:col-span-6"}>
{campaign.status === "DRAFT" ? (
<>
<motion.button
Expand Down
6 changes: 3 additions & 3 deletions packages/dashboard/src/pages/campaigns/new.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,8 +212,8 @@ export default function Index() {
<>
<Dashboard>
<Card title={"Create a new campaign"}>
<form onSubmit={handleSubmit(create)} className="space-6 grid gap-6 sm:grid-cols-6">
<div className={"sm:col-span-6 grid sm:grid-cols-6 gap-6"}>
<form onSubmit={handleSubmit(create)} className="space-y-6 sm:grid sm:grid-cols-6 sm:gap-6">
<div className={"sm:col-span-6 sm:grid sm:grid-cols-6 sm:gap-6 space-y-6 sm:space-y-0"}>
<Input
className={"sm:col-span-6"}
label={"Subject"}
Expand Down Expand Up @@ -626,7 +626,7 @@ export default function Index() {
return router.push("/campaigns");
}}
className={
"flex w-full justify-center rounded border border-neutral-300 bg-white px-6 py-2 text-base font-medium text-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
"flex w-fit justify-center rounded border border-neutral-300 bg-white px-6 py-2 text-base font-medium text-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
}
>
Cancel
Expand Down
2 changes: 1 addition & 1 deletion packages/dashboard/src/pages/contacts/[id].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -246,7 +246,7 @@ export default function Index() {
</>
}
>
<form onSubmit={handleSubmit(update)} className="grid gap-x-5 space-y-9 sm:grid-cols-2">
<form onSubmit={handleSubmit(update)} className="space-y-6 sm:grid sm:gap-x-5 sm:space-y-9 sm:grid-cols-2">
<div className={"col-span-2 flex items-center gap-6"}>
<span className="inline-flex h-20 w-20 items-center justify-center rounded-full bg-neutral-100">
<span className="text-xl font-semibold leading-none text-neutral-800">{contact.email[0].toUpperCase()}</span>
Expand Down
8 changes: 4 additions & 4 deletions packages/dashboard/src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ export default function Index() {
<>
<Dashboard>
<>
<div className="divide-y divide-neutral-200 overflow-hidden rounded border border-neutral-200 bg-neutral-200 sm:grid sm:grid-cols-3 sm:gap-px sm:divide-y-0">
<div className="group relative rounded-tl rounded-tr bg-white p-6 transition focus-within:ring-2 focus-within:ring-inset focus-within:ring-neutral-800 sm:rounded-tr-none">
<div className="divide-y divide-neutral-200 overflow-hidden rounded border border-neutral-200 bg-neutral-200 lg:grid lg:grid-cols-3 lg:gap-px lg:divide-y-0">
<div className="group relative rounded-tl rounded-tr bg-white p-6 transition focus-within:ring-2 focus-within:ring-inset focus-within:ring-neutral-800 lg:rounded-tr-none">
{activeProject.verified ? (
<>
<div>
Expand Down Expand Up @@ -108,7 +108,7 @@ export default function Index() {
</span>
</div>

<div className="group relative bg-white p-6 transition focus-within:ring-2 focus-within:ring-inset focus-within:ring-neutral-800 sm:rounded-tr">
<div className="group relative bg-white p-6 transition focus-within:ring-2 focus-within:ring-inset focus-within:ring-neutral-800 lg:rounded-tr">
<div>
<span className="inline-flex rounded bg-neutral-100 p-3 text-neutral-800 ring-4 ring-white">
<LineChart size={20} />
Expand All @@ -133,7 +133,7 @@ export default function Index() {
</span>
</div>

<div className="group relative bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-neutral-800 sm:rounded-bl">
<div className="group relative bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-neutral-800 lg:rounded-bl">
<div>
<span className="inline-flex rounded bg-neutral-100 p-3 text-neutral-800 ring-4 ring-white">
<Book size={20} />
Expand Down
4 changes: 2 additions & 2 deletions packages/dashboard/src/pages/settings/api.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ export default function Index() {
}}
>
<label className="block text-sm font-medium text-neutral-700">Public API Key</label>
<p className={"cursor-pointer rounded border border-neutral-300 bg-neutral-100 px-3 py-2 text-sm"}>
<p className={"cursor-pointer rounded border border-neutral-300 bg-neutral-100 px-3 py-2 text-sm truncate"}>
{activeProject.public}
</p>

Expand All @@ -111,7 +111,7 @@ export default function Index() {
}}
>
<label className="block text-sm font-medium text-neutral-700">Secret API Key</label>
<p className={"cursor-pointer rounded border border-neutral-300 bg-neutral-100 px-3 py-2 text-sm"}>
<p className={"cursor-pointer rounded border border-neutral-300 bg-neutral-100 px-3 py-2 text-sm truncate"}>
{activeProject.secret}
</p>

Expand Down
4 changes: 2 additions & 2 deletions packages/dashboard/src/pages/templates/[id].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ export default function Index() {
</>
}
>
<form onSubmit={handleSubmit(update)} className="grid gap-6 sm:grid-cols-6">
<form onSubmit={handleSubmit(update)} className="space-y-6 sm:space-y-0 sm:grid sm:gap-6 sm:grid-cols-6">
<Input
className={"sm:col-span-4"}
label={"Subject"}
Expand Down Expand Up @@ -320,7 +320,7 @@ export default function Index() {
return router.push("/templates");
}}
className={
"flex w-full justify-center rounded border border-neutral-300 bg-white px-6 py-2 text-base font-medium text-neutral-700 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
"flex w-fit justify-center rounded border border-neutral-300 bg-white px-6 py-2 text-base font-medium text-neutral-700 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
}
>
Cancel
Expand Down
2 changes: 1 addition & 1 deletion packages/dashboard/src/pages/templates/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export default function Index() {
{templates ? (
templates.length > 0 ? (
<>
<div className={"grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"}>
<div className={"grid grid-cols-1 gap-6 lg:grid-cols-3"}>
{templates
.sort((a, b) => {
if (a.actions.length > 0 && b.actions.length === 0) {
Expand Down
4 changes: 2 additions & 2 deletions packages/dashboard/src/pages/templates/new.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export default function Index() {
<>
<Dashboard>
<Card title={"Create a new template"} description={"Reusable blueprints of your emails"}>
<form onSubmit={handleSubmit(create)} className="grid gap-6 sm:grid-cols-6">
<form onSubmit={handleSubmit(create)} className="space-y-6 sm:space-y-0 sm:grid sm:gap-6 sm:grid-cols-6">
<Input
className={"sm:col-span-4"}
label={"Subject"}
Expand Down Expand Up @@ -213,7 +213,7 @@ export default function Index() {
return router.push("/templates");
}}
className={
"flex w-full justify-center rounded border border-neutral-300 bg-white px-6 py-2 text-base font-medium text-neutral-700 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
"flex w-fit justify-center rounded border border-neutral-300 bg-white px-6 py-2 text-base font-medium text-neutral-700 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
}
>
Cancel
Expand Down