From e5033c2accf5c94bc48a97f2cfd1318cfe95ae0a Mon Sep 17 00:00:00 2001
From: Isaac Hellendag <dish@elementl.com>
Date: Mon, 22 Apr 2024 13:24:11 -0500
Subject: [PATCH] [ui] Monospace font fixes in oss

---
 .../packages/ui-components/src/components/Trace.tsx    |  1 +
 .../packages/ui-core/src/app/PythonErrorInfo.tsx       |  1 +
 .../packages/ui-core/src/asset-graph/AssetNode.tsx     |  4 ++--
 .../ui-core/src/asset-graph/CollapsedGroupNode.tsx     |  2 +-
 .../packages/ui-core/src/pipelines/Description.tsx     | 10 ++++++++--
 .../packages/ui-core/src/runs/RunTimeline.tsx          |  2 +-
 6 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Trace.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Trace.tsx
index ef7f1e811e665..50c56f03067f3 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/Trace.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/Trace.tsx
@@ -7,6 +7,7 @@ export const Trace = styled.div`
   background-color: ${Colors.backgroundLight()};
   color: ${Colors.textLight()};
   font-family: ${FontFamily.monospace};
+  font-size: 13px;
   max-height: 90vh;
   overflow: auto;
   white-space: pre;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/PythonErrorInfo.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/PythonErrorInfo.tsx
index 22f664889e770..bf6653aa47ea3 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/app/PythonErrorInfo.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/app/PythonErrorInfo.tsx
@@ -149,6 +149,7 @@ const ErrorHeader = styled.h3`
 const Trace = styled.div`
   color: ${Colors.textLight()};
   font-family: ${FontFamily.monospace};
+  font-size: 12px;
   white-space: pre;
   padding-bottom: 1em;
 `;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNode.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNode.tsx
index eaa0324362064..655e7d5f0b68d 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNode.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/AssetNode.tsx
@@ -218,8 +218,8 @@ export const AssetNodeMinimal = ({
               />
             ) : null}
             {isStale ? <MinimalNodeStaleDot assetKey={assetKey} liveData={liveData} /> : null}
-            <MinimalName style={{fontSize: 28}} $isSource={isSource}>
-              {withMiddleTruncation(displayName, {maxLength: 20})}
+            <MinimalName style={{fontSize: 24}} $isSource={isSource}>
+              {withMiddleTruncation(displayName, {maxLength: 18})}
             </MinimalName>
           </MinimalAssetNodeBox>
         </TooltipStyled>
diff --git a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/CollapsedGroupNode.tsx b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/CollapsedGroupNode.tsx
index 5c42360f3682e..3293282169647 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/asset-graph/CollapsedGroupNode.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/asset-graph/CollapsedGroupNode.tsx
@@ -62,7 +62,7 @@ export const GroupNodeNameAndRepo = ({group, minimal}: {minimal: boolean; group:
         </div>
       </Box>
       <Box style={{fontSize: 12, lineHeight: '1em', color: Colors.textLight()}}>
-        {withMiddleTruncation(location, {maxLength: maxLengthAtFontSize(14)})}
+        {withMiddleTruncation(location, {maxLength: maxLengthAtFontSize(16)})}
       </Box>
     </Box>
   );
diff --git a/js_modules/dagster-ui/packages/ui-core/src/pipelines/Description.tsx b/js_modules/dagster-ui/packages/ui-core/src/pipelines/Description.tsx
index 344454726cf1e..1948f1f730d37 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/pipelines/Description.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/pipelines/Description.tsx
@@ -80,9 +80,9 @@ export class Description extends React.Component<IDescriptionProps, IDescription
           sel.removeAllRanges();
           sel.addRange(range);
         }}
+        $fontSize={this.props.fontSize || '0.8rem'}
         style={{
           maxHeight: expanded ? undefined : this.props.maxHeight || DEFAULT_MAX_HEIGHT,
-          fontSize: this.props.fontSize || '0.8rem',
         }}
       >
         {hasMore && (
@@ -101,12 +101,18 @@ export class Description extends React.Component<IDescriptionProps, IDescription
   }
 }
 
-const Container = styled.div`
+const Container = styled.div<{$fontSize: string | number}>`
   overflow: hidden;
   position: relative;
+  font-size: ${({$fontSize}) => (typeof $fontSize === 'number' ? `${$fontSize}px` : $fontSize)};
   p:last-child {
     margin-bottom: 0;
   }
+
+  & code,
+  & pre {
+    font-size: ${({$fontSize}) => (typeof $fontSize === 'number' ? `${$fontSize}px` : $fontSize)};
+  }
 `;
 
 const ShowMoreHandle = styled.div`
diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunTimeline.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunTimeline.tsx
index fb4fb085429b4..4a4093f90f926 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/runs/RunTimeline.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RunTimeline.tsx
@@ -513,7 +513,7 @@ const NowMarker = styled.div`
   border-radius: 1px;
   color: ${Colors.accentReversed()};
   cursor: default;
-  font-size: 12px;
+  font-size: 10px;
   line-height: 12px;
   margin-left: -12px;
   padding: 1px 4px;