From 1c093daa91bc51a3937ea344a6129212edef196b Mon Sep 17 00:00:00 2001
From: Andrew Jiang <andrew@buildwithfern.com>
Date: Thu, 8 Feb 2024 02:08:10 -0500
Subject: [PATCH] correctly render lines

---
 packages/ui/app/src/api-page/ApiPackageContents.tsx      | 9 +++++++--
 .../ui/app/src/api-page/endpoints/EndpointContent.tsx    | 2 +-
 packages/ui/app/src/api-page/webhooks/WebhookContent.tsx | 2 +-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/ui/app/src/api-page/ApiPackageContents.tsx b/packages/ui/app/src/api-page/ApiPackageContents.tsx
index 357d9a8ed3..d514040b78 100644
--- a/packages/ui/app/src/api-page/ApiPackageContents.tsx
+++ b/packages/ui/app/src/api-page/ApiPackageContents.tsx
@@ -31,7 +31,12 @@ export const ApiPackageContents: React.FC<ApiPackageContents.Props> = ({
                     apiDefinition={apiDefinition}
                     endpoint={endpoint}
                     subpackageTitle={subpackageTitle}
-                    isLastInApi={isLastInParentPackage && idx === endpoints.length - 1}
+                    isLastInApi={
+                        isLastInParentPackage &&
+                        webhooks.length === 0 &&
+                        subpackages.length === 0 &&
+                        idx === endpoints.length - 1
+                    }
                 />
             ))}
             {webhooks.map((webhook, idx) => (
@@ -39,7 +44,7 @@ export const ApiPackageContents: React.FC<ApiPackageContents.Props> = ({
                     key={webhook.id}
                     webhook={webhook}
                     subpackageTitle={subpackageTitle}
-                    isLastInApi={isLastInParentPackage && idx === webhooks.length - 1}
+                    isLastInApi={isLastInParentPackage && subpackages.length === 0 && idx === webhooks.length - 1}
                 />
             ))}
             {subpackages.map((subpackage, idx) => (
diff --git a/packages/ui/app/src/api-page/endpoints/EndpointContent.tsx b/packages/ui/app/src/api-page/endpoints/EndpointContent.tsx
index 448cb99453..1f2441e1ff 100644
--- a/packages/ui/app/src/api-page/endpoints/EndpointContent.tsx
+++ b/packages/ui/app/src/api-page/endpoints/EndpointContent.tsx
@@ -220,7 +220,7 @@ export const EndpointContent: React.FC<EndpointContent.Props> = ({
 
     return (
         <div
-            className={"scroll-mt-header-height-padded mx-8"}
+            className={"scroll-mt-header-height-padded mx-6 md:mx-8"}
             onClick={() => setSelectedError(undefined)}
             ref={containerRef}
         >
diff --git a/packages/ui/app/src/api-page/webhooks/WebhookContent.tsx b/packages/ui/app/src/api-page/webhooks/WebhookContent.tsx
index 191c0bd54d..517b021059 100644
--- a/packages/ui/app/src/api-page/webhooks/WebhookContent.tsx
+++ b/packages/ui/app/src/api-page/webhooks/WebhookContent.tsx
@@ -42,7 +42,7 @@ export const WebhookContent = React.memo<WebhookContent.Props>(function WebhookC
     const webhookExample = example ? <WebhookExample example={example} /> : null;
 
     return (
-        <ApiPageMargins className={"scroll-mt-header-height-padded mx-8"}>
+        <ApiPageMargins className={"scroll-mt-header-height-padded mx-6 md:mx-8"}>
             <div
                 className={classNames(
                     "scroll-mt-header-height max-w-content-width lg:max-w-endpoint-width mx-auto lg:grid lg:grid-cols-2 lg:gap-12",