Updating dashboard info panel styling (#23773)

frontend/src/metabase/dashboard/components/DashboardInfoSidebar.styled.tsx

 import styled from "@emotion/styled";
 
 import { color } from "metabase/lib/colors";
+import EditableText from "metabase/core/components/EditableText";
 
 export const DashboardInfoSidebarRoot = styled.div`
   width: 360px;
-  padding: 0.5rem 2rem;
+  padding: 0 2rem 0.5rem;
   background: ${color("white")};
   border-left: 1px solid ${color("border")};
   height: 100%;
@@ -19,7 +20,21 @@ export const ContentSection = styled.div`
   padding: 2rem 0;
   border-bottom: 1px solid ${color("border")};
 
+  &:first-of-type {
+    padding-top: 1.5rem;
+  }
+
   &:last-of-type {
     border-bottom: none;
   }
+
+  ${EditableText.Root} {
+    font-size: 1rem;
+    line-height: 1.4rem;
+    margin-left: -0.3rem;
+  }
+`;
+
+export const DescriptionHeader = styled.h3`
+  margin-bottom: 0.5rem;
 `;

frontend/src/metabase/dashboard/components/DashboardInfoSidebar.tsx

@@ -21,6 +21,7 @@ import {
   DashboardInfoSidebarRoot,
   HistoryHeader,
   ContentSection,
+  DescriptionHeader,
 } from "./DashboardInfoSidebar.styled";
 
 interface DashboardInfoSidebarProps {
@@ -70,6 +71,7 @@ const DashboardInfoSidebar = ({
   return (
     <DashboardInfoSidebarRoot>
       <ContentSection>
+        <DescriptionHeader>{t`About`}</DescriptionHeader>
         <EditableText
           initialValue={dashboard.description}
           isDisabled={!dashboard.can_write}