diff --git a/src/__fixtures__/default-schema.json b/src/__fixtures__/default-schema.json
index 07b76863..013e62f4 100644
--- a/src/__fixtures__/default-schema.json
+++ b/src/__fixtures__/default-schema.json
@@ -4,7 +4,7 @@
   "properties": {
     "name": {
       "type": "string",
-      "description": "The user's full name."
+      "description": "The user's full name. This description can be long and should truncate once it reaches the end of the row. If it's not truncating then theres and issue that needs to be fixed. Help!"
     },
     "age": {
       "type": "number",
@@ -19,7 +19,8 @@
       "type": ["null", "array"],
       "items": {
         "type": ["string", "number"]
-      }
+      },
+      "description": "This description can be long and should truncate once it reaches the end of the row. If it's not truncating then theres and issue that needs to be fixed. Help!"
     },
     "email": {
       "type": "string",
diff --git a/src/__stories__/_styles.scss b/src/__stories__/_styles.scss
index daee8ae8..c5af64ad 100644
--- a/src/__stories__/_styles.scss
+++ b/src/__stories__/_styles.scss
@@ -1,4 +1,2 @@
-@import '../styles/json-schema-viewer';
-
-@import '~@stoplight/tree-list/styles/_tree-list.scss';
-@import '~@stoplight/ui-kit/styles/_ui-kit.scss';
+@import "~@stoplight/tree-list/styles/_tree-list.scss";
+@import "~@stoplight/ui-kit/styles/_ui-kit.scss";
diff --git a/src/components/SchemaRow.tsx b/src/components/SchemaRow.tsx
index 4a11c11e..19767343 100644
--- a/src/components/SchemaRow.tsx
+++ b/src/components/SchemaRow.tsx
@@ -39,19 +39,16 @@ export const SchemaRow: React.FunctionComponent<ISchemaRow> = ({ node, treeStore
   const validationCount = Object.keys(nodeValidations).length;
 
   const requiredElem = (
-    <span className={cn(required ? 'font-medium' : 'text-darken-7 dark:text-lighten-6')}>
+    <div className={cn('ml-2', required ? 'font-medium' : 'text-darken-7 dark:text-lighten-6')}>
       {required ? 'required' : 'optional'}
       {validationCount ? `+${validationCount}` : ''}
-    </span>
+    </div>
   );
 
   return (
-    <div
-      className="flex-1 flex items-center overflow-hidden"
-      style={{ marginLeft: ROW_OFFSET, marginRight: ROW_OFFSET }}
-    >
+    <div className="px-2 flex-1 w-full">
       <div
-        className="flex flex-1 items-center text-sm leading-tight w-full h-full relative overflow-hidden"
+        className="flex items-center text-sm relative"
         style={{
           marginLeft: ICON_DIMENSION * node.level, // offset for spacing
         }}
@@ -76,47 +73,38 @@ export const SchemaRow: React.FunctionComponent<ISchemaRow> = ({ node, treeStore
 
         {schemaNode.divider && (
           <div className="flex items-center w-full absolute" style={{ top: -9, height: 1 }}>
-            <div
-              className="font-medium text-darken-7 dark:text-lighten-7 pr-2 uppercase text-xs"
-              style={{ marginLeft: -10 }}
-            >
-              {schemaNode.divider}
-            </div>
+            <div className="text-darken-7 dark:text-lighten-7 uppercase text-xs pr-2 -ml-4">{schemaNode.divider}</div>
             <div className="flex-1 bg-darken-5 dark:bg-lighten-5" style={{ height: 1 }} />
           </div>
         )}
 
-        <div className="flex-1 truncate">
-          <div className="flex items-baseline">
-            {name && <span className="mr-2">{name}</span>}
-
-            <Types type={type} subtype={subtype}>
-              {type === '$ref' ? `[${$ref}]` : null}
-            </Types>
-
-            {node.canHaveChildren && (
-              <span className="ml-2 text-darken-7 dark:text-lighten-6">{`{${childrenCount}}`}</span>
-            )}
-
-            {'pattern' in schemaNode && schemaNode.pattern ? (
-              <span className="text-darken-7 dark:text-lighten-6 ml-2">(pattern property)</span>
-            ) : null}
-
-            {description && (
-              <Popover
-                boundary="window"
-                interactionKind="hover"
-                className="overflow-hidden JSV--Popover"
-                targetClassName="overflow-hidden block"
-                target={<div className="ml-2 text-darken-7 dark:text-lighten-6 truncate">{description}</div>}
-                content={
-                  <div className="p-5" style={{ maxHeight: 500, maxWidth: 400 }}>
-                    <MarkdownViewer markdown={description} />
-                  </div>
-                }
-              />
-            )}
-          </div>
+        <div className="flex-1 flex truncate">
+          {name && <div className="mr-2">{name}</div>}
+
+          <Types type={type} subtype={subtype}>
+            {type === '$ref' ? `[${$ref}]` : null}
+          </Types>
+
+          {node.canHaveChildren && <div className="ml-2 text-darken-7 dark:text-lighten-6">{`{${childrenCount}}`}</div>}
+
+          {'pattern' in schemaNode && schemaNode.pattern ? (
+            <div className="ml-2 text-darken-7 dark:text-lighten-6 truncate">(pattern property)</div>
+          ) : null}
+
+          {description && (
+            <Popover
+              boundary="window"
+              interactionKind="hover"
+              className="ml-2 flex-1 truncate flex items-baseline"
+              target={<div className="text-darken-7 dark:text-lighten-6 w-full truncate">{description}</div>}
+              targetClassName="text-darken-7 dark:text-lighten-6 w-full truncate"
+              content={
+                <div className="p-5" style={{ maxHeight: 500, maxWidth: 400 }}>
+                  <MarkdownViewer markdown={description} />
+                </div>
+              }
+            />
+          )}
         </div>
 
         {validationCount ? (
@@ -124,35 +112,38 @@ export const SchemaRow: React.FunctionComponent<ISchemaRow> = ({ node, treeStore
             boundary="window"
             interactionKind="hover"
             content={
-              <div className="p-3">
+              <div className="p-5" style={{ maxHeight: 500, maxWidth: 400 }}>
                 {map(Object.keys(nodeValidations), (key, index) => {
                   const validation = nodeValidations[key];
 
-                  let elem = [];
+                  let elem = null;
                   if (Array.isArray(validation)) {
-                    elem = validation.map(v => (
-                      <span key={v} className="px-1 bg-red-2 text-red-7 text-sm rounded">
-                        {v}
-                      </span>
+                    elem = validation.map((v, i) => (
+                      <div className="mt-1 mr-1 flex items-center">
+                        <div className="px-1 bg-gray-2 font-bold text-sm rounded" key={i}>
+                          {v}
+                        </div>
+                        {i < validation.length - 1 ? <div>,</div> : null}
+                      </div>
                     ));
                   } else if (typeof validation === 'object') {
-                    elem = [
-                      <span key={index} className="px-1 bg-red-2 text-red-7 text-sm rounded">
+                    elem = (
+                      <div className="m-1 px-1 bg-gray-2 font-bold text-sm rounded" key={index}>
                         {'{...}'}
-                      </span>,
-                    ];
+                      </div>
+                    );
                   } else {
-                    elem = [
-                      <span key={index} className="px-1 bg-red-2 text-red-7 text-sm rounded">
+                    elem = (
+                      <div className="m-1 px-1 bg-gray-2 font-bold text-sm rounded" key={index}>
                         {JSON.stringify(validation)}
-                      </span>,
-                    ];
+                      </div>
+                    );
                   }
 
                   return (
-                    <div key={index} className="py-1">
-                      <span className="font-medium pr-2">{key}:</span>
-                      <span className="px-1 bg-red-2 text-red-7 text-sm rounded">{elem}</span>
+                    <div key={index} className="py-1 flex items-baseline">
+                      <div className="font-medium pr-2 w-24">{key}:</div>
+                      <div className="flex-1 flex flex-wrap text-center">{elem}</div>
                     </div>
                   );
                 })}
diff --git a/src/components/Types.tsx b/src/components/Types.tsx
index c5119134..4b456150 100644
--- a/src/components/Types.tsx
+++ b/src/components/Types.tsx
@@ -16,7 +16,7 @@ export interface IType {
 
 export const Type: React.FunctionComponent<IType> = ({ className, children, type, subtype }) => {
   return (
-    <span className={cn(className, PropertyTypeColors[type])}>
+    <span className={cn(className, PropertyTypeColors[type], 'truncate')}>
       {type === 'array' && subtype && subtype !== 'array' ? `array[${subtype}]` : type}
 
       {children}
@@ -42,7 +42,7 @@ export const Types: React.FunctionComponent<ITypes> = ({ className, type, subtyp
   }
 
   return (
-    <div className={cn(className, 'overflow-hidden')}>
+    <div className={cn(className, 'truncate')}>
       <>
         {type.map((name, i, { length }) => (
           <React.Fragment key={i}>
diff --git a/src/styles/_json-schema-viewer.scss b/src/styles/_json-schema-viewer.scss
deleted file mode 100644
index cfae7e5c..00000000
--- a/src/styles/_json-schema-viewer.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@import '~@stoplight/ui-kit/styles/common/theme';
-
-.JsonSchemaViewer {
-  .JSV--Popover {
-    overflow: hidden;
-
-    .#{$ns}-popover-target {
-      display: block !important;
-    }
-  }
-}
diff --git a/src/utils/__tests__/__snapshots__/renderSchema.spec.ts.snap b/src/utils/__tests__/__snapshots__/renderSchema.spec.ts.snap
index 557f886d..fc13cc82 100644
--- a/src/utils/__tests__/__snapshots__/renderSchema.spec.ts.snap
+++ b/src/utils/__tests__/__snapshots__/renderSchema.spec.ts.snap
@@ -374,6 +374,7 @@ Array [
           "type": "string",
         },
         "items": Object {
+          "description": "This description can be long and should truncate once it reaches the end of the row. If it's not truncating then theres and issue that needs to be fixed. Help!",
           "items": Object {
             "type": Array [
               "string",
@@ -386,7 +387,7 @@ Array [
           ],
         },
         "name": Object {
-          "description": "The user's full name.",
+          "description": "The user's full name. This description can be long and should truncate once it reaches the end of the row. If it's not truncating then theres and issue that needs to be fixed. Help!",
           "type": "string",
         },
         "permissions": Object {
@@ -442,7 +443,7 @@ Array [
     "level": 1,
     "metadata": Object {
       "annotations": Object {
-        "description": "The user's full name.",
+        "description": "The user's full name. This description can be long and should truncate once it reaches the end of the row. If it's not truncating then theres and issue that needs to be fixed. Help!",
       },
       "enum": undefined,
       "id": "random-id",
@@ -503,7 +504,9 @@ Array [
     "level": 1,
     "metadata": Object {
       "additionalItems": undefined,
-      "annotations": Object {},
+      "annotations": Object {
+        "description": "This description can be long and should truncate once it reaches the end of the row. If it's not truncating then theres and issue that needs to be fixed. Help!",
+      },
       "enum": undefined,
       "id": "random-id",
       "items": undefined,