From 0db49b1a7c0243beda9aadf146065d2ce999085e Mon Sep 17 00:00:00 2001
From: Smart-Codi <codemaster08240328@gmail.com>
Date: Fri, 25 Feb 2022 06:16:31 +0000
Subject: [PATCH] fix Metadata browser in SQL not render nicely in Safari
 (#18855)

---
 .../src/SqlLab/components/ColumnElement/index.tsx         | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/ColumnElement/index.tsx b/superset-frontend/src/SqlLab/components/ColumnElement/index.tsx
index 9dc0583b423de..481c1067f13fc 100644
--- a/superset-frontend/src/SqlLab/components/ColumnElement/index.tsx
+++ b/superset-frontend/src/SqlLab/components/ColumnElement/index.tsx
@@ -75,6 +75,10 @@ interface ColumnElementProps {
   };
 }
 
+const NowrapDiv = styled.div`
+  white-space: nowrap;
+`;
+
 const ColumnElement = ({ column }: ColumnElementProps) => {
   let columnName: React.ReactNode = column.name;
   let icons;
@@ -105,9 +109,9 @@ const ColumnElement = ({ column }: ColumnElementProps) => {
         {columnName}
         {icons}
       </div>
-      <div className="pull-right text-muted">
+      <NowrapDiv className="pull-right text-muted">
         <small> {column.type}</small>
-      </div>
+      </NowrapDiv>
     </div>
   );
 };