fix: Fix UI issues on embed popup footer (#10286)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
feat/embed-in-emails
GitStart-Cal.com 2023-07-24 07:17:25 +01:00 committed by GitHub
parent f081c733b8
commit 2b5577772b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 15 deletions

View File

@ -1181,7 +1181,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
</div>
</div>
</div>
<div className="flex w-2/3 flex-col p-8">
<div className="flex w-2/3 flex-col px-8 pt-8">
<HorizontalTabs data-testid="embed-tabs" tabs={parsedTabs} linkShallow />
{tabs.map((tab) => {
return (
@ -1208,10 +1208,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
)}
</div>
<div className={router.query.embedTabName == "embed-preview" ? "mt-2 block" : "hidden"} />
<DialogFooter
className="mt-10 flex flex-row-reverse gap-x-2"
showDivider
customDividerClassNames="w-2/3">
<DialogFooter className="mt-10 flex-row-reverse gap-x-2" showDivider>
<DialogClose />
{tab.type === "code" ? (
<Button

View File

@ -141,20 +141,12 @@ export function DialogHeader(props: DialogHeaderProps) {
);
}
export function DialogFooter(props: {
children: ReactNode;
className?: string;
showDivider?: boolean;
customDividerClassNames?: string;
}) {
export function DialogFooter(props: { children: ReactNode; className?: string; showDivider?: boolean }) {
return (
<div className={classNames("bg-default sticky bottom-0", props.className)}>
{props.showDivider && (
// TODO: the -mx-8 is causing overflow in the dialog buttons
<hr
data-testid="divider"
className={classNames("border-subtle -mx-8", props.customDividerClassNames)}
/>
<hr data-testid="divider" className="border-subtle -mx-8" />
)}
<div
className={classNames(