Fix announcement banner margin (#3056)

Author: zenoachtig

packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx

@@ -26,52 +26,56 @@ export function AnnouncementBanner(props: {
     const style = BANNER_STYLES[announcement.style];
 
     return (
-        <div className="announcement-banner scroll-nojump theme-bold:bg-header-background pt-4 pb-2">
-            <div className={tcls('relative', CONTAINER_STYLE)}>
-                <Tag
-                    href={contentRef?.href ?? ''}
-                    className={tcls(
-                        'flex w-full items-start justify-center overflow-hidden rounded-md straight-corners:rounded-none px-4 py-3 text-neutral-strong text-sm theme-bold:ring-1 theme-gradient:ring-1 ring-inset transition-colors',
-                        style.container,
-                        closeable && 'pr-12',
-                        hasLink && style.hover
-                    )}
-                >
-                    <Icon
-                        icon={style.icon as IconName}
-                        className={`mt-0.5 mr-3 size-4 shrink-0 ${style.iconColor}`}
-                    />
-                    <div>
-                        {announcement.message}
-                        {hasLink ? (
-                            <div className={tcls(linkStyles, style.link, 'ml-1 inline')}>
-                                {contentRef?.icon ? (
-                                    <span className="mr-1 ml-2 *:inline">{contentRef?.icon}</span>
-                                ) : null}
-                                {announcement.link?.title && (
-                                    <span className="mr-1">{announcement.link?.title}</span>
-                                )}
-                                <Icon
-                                    icon={
-                                        announcement.link?.to.kind === 'url'
-                                            ? 'arrow-up-right'
-                                            : 'chevron-right'
-                                    }
-                                    className={tcls('mb-0.5 inline size-3')}
-                                />
-                            </div>
-                        ) : null}
-                    </div>
-                </Tag>
-                {closeable ? (
-                    <button
-                        className={`absolute top-0 right-4 mt-2 mr-2 rounded straight-corners:rounded-none p-1.5 transition-all hover:ring-1 sm:right-6 md:right-8 ${style.close}`}
-                        type="button"
-                        onClick={dismissAnnouncement}
+        <div className="announcement-banner theme-bold:bg-header-background pt-4 pb-2">
+            <div className="scroll-nojump">
+                <div className={tcls('relative', CONTAINER_STYLE)}>
+                    <Tag
+                        href={contentRef?.href ?? ''}
+                        className={tcls(
+                            'flex w-full items-start justify-center overflow-hidden rounded-md straight-corners:rounded-none px-4 py-3 text-neutral-strong text-sm theme-bold:ring-1 theme-gradient:ring-1 ring-inset transition-colors',
+                            style.container,
+                            closeable && 'pr-12',
+                            hasLink && style.hover
+                        )}
                     >
-                        <Icon icon="close" className="size-4" />
-                    </button>
-                ) : null}
+                        <Icon
+                            icon={style.icon as IconName}
+                            className={`mt-0.5 mr-3 size-4 shrink-0 ${style.iconColor}`}
+                        />
+                        <div>
+                            {announcement.message}
+                            {hasLink ? (
+                                <div className={tcls(linkStyles, style.link, 'ml-1 inline')}>
+                                    {contentRef?.icon ? (
+                                        <span className="mr-1 ml-2 *:inline">
+                                            {contentRef?.icon}
+                                        </span>
+                                    ) : null}
+                                    {announcement.link?.title && (
+                                        <span className="mr-1">{announcement.link?.title}</span>
+                                    )}
+                                    <Icon
+                                        icon={
+                                            announcement.link?.to.kind === 'url'
+                                                ? 'arrow-up-right'
+                                                : 'chevron-right'
+                                        }
+                                        className={tcls('mb-0.5 inline size-3')}
+                                    />
+                                </div>
+                            ) : null}
+                        </div>
+                    </Tag>
+                    {closeable ? (
+                        <button
+                            className={`absolute top-0 right-4 mt-2 mr-2 rounded straight-corners:rounded-none p-1.5 transition-all hover:ring-1 sm:right-6 md:right-8 ${style.close}`}
+                            type="button"
+                            onClick={dismissAnnouncement}
+                        >
+                            <Icon icon="close" className="size-4" />
+                        </button>
+                    ) : null}
+                </div>
             </div>
         </div>
     );