[ui] Monospace font fixes in oss

dagster-io · Apr 22, 2024 · e5033c2 · e5033c2
1 parent 55e37b9
commit e5033c2
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
-Original file line number
+Diff line change
@@ Expand Up @@
             </div>
           </Box>
           <Box style={{fontSize: 12, lineHeight: '1em', color: Colors.textLight()}}>
-            {withMiddleTruncation(location, {maxLength: maxLengthAtFontSize(14)})}
+            {withMiddleTruncation(location, {maxLength: maxLengthAtFontSize(16)})}
           </Box>
         </Box>
       );
@@ Expand Down @@