fix(graph): break error header into two lines for small screens

nrwl · Apr 17, 2024 · dac110f · dac110f
1 parent 79fbdb9
commit dac110f
Showing 1 changed file with 14 additions and 16 deletions.
diff --git a/graph/ui-components/src/lib/error-renderer.tsx b/graph/ui-components/src/lib/error-renderer.tsx
@@ -6,24 +6,22 @@ export function ErrorRenderer({ errors }: { errors: GraphError[] }) {
   return (
     <div>
       {errors.map((error, index) => {
-        let errorHeading;
-        if (
-          error.fileName &&
-          isCauseWithLocation(error.cause) &&
-          error.cause.errors.length === 1
-        ) {
-          errorHeading = `${error.name} - ${error.fileName}:${error.cause.errors[0].location.line}:${error.cause.errors[0].location.column} - ${error.pluginName}`;
-        } else if (error.fileName) {
-          errorHeading = `${error.fileName} - ${error.pluginName}`;
-        } else {
-          errorHeading = error.pluginName;
-        }
+        const errorHeading =
+          error.pluginName && error.name
+            ? `${error.name} - ${error.pluginName}`
+            : error.name ?? error.message;
+        const fileSpecifier =
+          isCauseWithLocation(error.cause) && error.cause.errors.length === 1
+            ? `${error.fileName}:${error.cause.errors[0].location.line}:${error.cause.errors[0].location.column}`
+            : error.fileName;
         return (
-          <div className="pb-4">
-            <span className="block truncate font-normal font-bold dark:text-slate-200">
-              {errorHeading}
+          <div className="pb-4 overflow-hidden">
+            <span className="font-normal font-bold dark:text-slate-200 flex-col inline-flex md:inline max-w-full break-words">
+              <span>{errorHeading}</span>
+              <span className="hidden md:inline px-1">-</span>
+              <span>{fileSpecifier}</span>
             </span>
-            <pre className="whitespace-pre-wrap pl-4 pt-3">
+            <pre className="whitespace-pre-wrap pl-4 pt-3 overflow-x-scroll">
               {isCauseWithErrors(error.cause) &&
               error.cause.errors.length === 1 ? (
                 <div>