Fix screen width - release notes (#24881)

* fix screen width

* center items

* set maxwidth

* set back to justify between

* adding overflow auto to default layout

* remove center alignment for release note content

* fix vertically align release candidate button

Co-authored-by: Rachael Sewell <rachmari@github.com>

components/DefaultLayout.tsx

@@ -85,7 +85,7 @@ export const DefaultLayout = (props: Props) => {
         Skip to main content
       </a>
       <SidebarNav />
-      <div className="flex-column flex-1">
+      <div className="flex-column flex-1 overflow-auto">
         <Header />
         <main id="main-content">
           <DeprecationBanner />

components/release-notes/GHESReleaseNotePatch.tsx

@@ -35,14 +35,14 @@ export function GHESReleaseNotePatch({
   return (
     <div ref={containerRef} className="mb-10 pb-6 border-bottom border-top" id={patch.version}>
       <header style={{ zIndex: 1 }} className="container-xl border-bottom px-3 pt-4 pb-2">
-        <div className="d-flex flex-justify-between">
-          <h2 className="border-bottom-0 m-0 p-0">
+        <div className="d-flex flex-justify-between flex-wrap">
+          <h2 className="border-bottom-0 m-0 p-0 mt-2">
             {currentVersion.versionTitle}.{patch.patchVersion}
           </h2>
 
           {patch.release_candidate && (
             <span
-              className="IssueLabel color-bg-attention-emphasis color-fg-on-emphasis ml-3"
+              className="IssueLabel color-bg-attention-emphasis color-fg-on-emphasis ml-3 flex-items-center d-inline-flex"
               style={{ whiteSpace: 'pre' }}
             >
               Release Candidate
@@ -52,7 +52,7 @@ export function GHESReleaseNotePatch({
           {currentVersion.plan === 'enterprise-server' && (
             <Link
               href={`https://enterprise.github.com/releases/${patch.downloadVersion}/download`}
-              className="btn btn-outline flex-items-end ml-3 text-small text-bold no-underline"
+              className="btn btn-outline mt-2 text-small text-bold no-underline"
             >
               Download GitHub Enterprise Server {patch.downloadVersion}
             </Link>

components/release-notes/PatchNotes.tsx

@@ -29,12 +29,12 @@ export function PatchNotes({ patch, withReleaseNoteLabel }: Props) {
           <div
             key={key}
             className={cx(
-              'py-6 d-block d-xl-flex flex-justify-center',
+              'py-6 d-block d-xl-flex',
               !withReleaseNoteLabel && 'mx-6',
               !isLast && 'border-bottom'
             )}
           >
-            <ul className={cx(withReleaseNoteLabel && 'col-xl-9', 'col-12')}>
+            <ul className={cx(withReleaseNoteLabel)}>
               <h3>{SectionToLabelMap[key] || 'INVALID SECTION'}</h3>
               {sectionItems.map((item) => {
                 if (typeof item === 'string') {