Human: A bunch of little style changes because i am crazy ocd

wandb · Oct 10, 2024 · 4142f04 · 4142f04
1 parent 19f5107
commit 4142f04
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 8 deletions.
diff --git a/...rc/components/PagePanelComponents/Home/Browse3/pages/LeaderboardPage/EditableMarkdown.tsx b/...rc/components/PagePanelComponents/Home/Browse3/pages/LeaderboardPage/EditableMarkdown.tsx
@@ -19,6 +19,15 @@ const StyledReactMarkdown = styled(ReactMarkdown)`
   > *:first-child {
     margin-top: 0;
   }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: 600;
+    font-size: 1.25rem;
+  }
 `;
 
 export const EditableMarkdown: React.FC<EditableMarkdownProps> = ({
@@ -45,11 +54,10 @@ export const EditableMarkdown: React.FC<EditableMarkdownProps> = ({
         return; // Exit if we can't determine the height
       }
 
-      // Add padding (16px top + 16px bottom)
-      newHeight += 32;
+      newHeight -= 1;
 
       // Set a minimum height to prevent collapsing
-      newHeight = Math.max(newHeight, 56);
+      newHeight = Math.max(newHeight, 25);
 
       containerRef.current.style.height = `${newHeight}px`;
     }
@@ -95,7 +103,9 @@ export const EditableMarkdown: React.FC<EditableMarkdownProps> = ({
   }, [updateHeight, value]);
 
   return (
-    <Box ref={containerRef} sx={{padding: '16px', transition: 'height 0.3s'}}>
+    <Box
+      ref={containerRef}
+      sx={{padding: '0px', transition: 'height 0.3s', flex: 1}}>
       {isEditing ? (
         <TextField
           fullWidth

diff --git a/...src/components/PagePanelComponents/Home/Browse3/pages/LeaderboardPage/LeaderboardPage.tsx b/...src/components/PagePanelComponents/Home/Browse3/pages/LeaderboardPage/LeaderboardPage.tsx
@@ -114,8 +114,18 @@ export const LeaderboardPageContent: React.FC<LeaderboardPageProps> = props => {
           width="100%"
           sx={{
             alignItems: 'flex-start',
+            padding: '12px',
+            gap: '12px',
           }}>
-          <Box flexShrink={0} flexGrow={1} overflow="auto">
+          <Box
+            flexShrink={0}
+            flexGrow={1}
+            sx={{
+              overflow: 'auto',
+              height: '100%',
+              display: 'flex',
+              alignItems: 'center',
+            }}>
             <EditableMarkdown
               value={description}
               onChange={setDescription}
@@ -125,8 +135,8 @@ export const LeaderboardPageContent: React.FC<LeaderboardPageProps> = props => {
           <div
             style={{
               display: showConfig ? 'none' : 'block',
-              paddingRight: '16px',
-              paddingTop: '16px',
+              // paddingRight: '12px',
+              // paddingTop: '12px',
             }}>
             <ToggleLeaderboardConfig
               isOpen={showConfig}
@@ -182,7 +192,7 @@ export const ToggleLeaderboardConfig: React.FC<{
       }}>
       <Button
         variant="ghost"
-        size="medium"
+        size="small"
         onClick={onClick}
         tooltip={isOpen ? 'Discard Changes' : 'Configure Leaderboard'}
         icon={isOpen ? 'close' : 'settings'}