docs: fix scroll + divider issues (#9663)

www/apps/api-reference/components/Section/Container/index.tsx

@@ -19,7 +19,9 @@ const SectionContainer = forwardRef<HTMLDivElement, SectionContainerProps>(
         ref={ref}
       >
         {children}
-        {!noDivider && <SectionDivider className="-left-1.5 lg:!-left-full" />}
+        {!noDivider && (
+          <SectionDivider className="-left-[16px] lg:!-left-1/4" />
+        )}
       </div>
     )
   }

www/apps/api-reference/components/Tags/Operation/index.tsx

@@ -134,7 +134,7 @@ const TagOperation = ({
           }
         />
       </div>
-      <SectionDivider />
+      <SectionDivider className="-left-[16px] lg:!-left-1/4" />
     </div>
   )
 }

www/apps/api-reference/components/Tags/Section/index.tsx

@@ -123,7 +123,7 @@ const TagSection = ({ tag }: TagSectionProps) => {
       <DividedLayout
         ref={ref}
         mainContent={
-          <SectionContainer>
+          <SectionContainer noDivider={true}>
             <h2>{tag.name}</h2>
             {tag.description && (
               <Section>
@@ -154,6 +154,7 @@ const TagSection = ({ tag }: TagSectionProps) => {
               vertical
               question="Was this section helpful?"
             />
+            <SectionDivider className="-left-[16px] lg:!-left-[30%]" />
           </SectionContainer>
         }
         codeContent={<></>}
@@ -166,7 +167,7 @@ const TagSection = ({ tag }: TagSectionProps) => {
           <TagPaths tag={tag} />
         </LoadingProvider>
       )}
-      {!loadPaths && <SectionDivider />}
+      {!loadPaths && <SectionDivider className="lg:!-left-1" />}
     </div>
   )
 }

www/apps/api-reference/layouts/Divided/index.tsx

@@ -39,15 +39,17 @@ const DividedLayout = forwardRef<HTMLDivElement, DividedLayoutProps>(
         >
           {mainContent}
         </div>
-        <div
-          className={clsx(
-            "w-full flex-shrink-0 flex-grow-0 lg:w-[calc(50%-32px)] lg:basis-[calc(50%-32px)] lg:pr-1.5",
-            "mt-2 lg:mt-0",
-            codeContentClassName
-          )}
-        >
-          {codeContent}
-        </div>
+        {codeContent && (
+          <div
+            className={clsx(
+              "w-full flex-shrink-0 flex-grow-0 lg:w-[calc(50%-32px)] lg:basis-[calc(50%-32px)] lg:pr-1.5",
+              "mt-2 lg:mt-0",
+              codeContentClassName
+            )}
+          >
+            {codeContent}
+          </div>
+        )}
       </div>
     )
   }