Merge pull request #2046 from LiFaytheGoblin/2045/project-page/studio-thumbnails

Fix appearance of studio thumbnails on preview project page

src/components/thumbnail/thumbnail.jsx

@@ -74,6 +74,7 @@ const Thumbnail = props => {
             <a
                 href={props.href}
                 key="titleElement"
+                title={props.title}
             >
                 {props.title}
             </a>

src/components/thumbnailcolumn/thumbnailcolumn.scss

@@ -5,10 +5,10 @@
 
     $thumbnail-width: 220px;
     $thumbnail-inner-width: 204px;
-    
+
     $project-height: 208px;
     $gallery-height: 164px;
-    
+
     margin: 0 auto;
     padding: 12px 0;
     justify-content: flex-start;
@@ -16,14 +16,13 @@
 
     .thumbnail {
         margin: 7px;
-        border-radius: 4px;
-        box-shadow: 0 0 0 1px $active-gray;
-        background-color: $ui-white;
-        padding-bottom: 4px;
         width: $thumbnail-width;
 
         .thumbnail-image {
             margin: 8px auto;
+            border-radius: 4px;
+            box-shadow: 0 0 0 1px $active-gray;
+            background-color: $ui-white;
             width: $thumbnail-inner-width;
         }
 
@@ -45,10 +44,18 @@
             .thumbnail-title {
                 float: left;
                 max-width: 164px;
+                overflow: hidden;
 
                 .thumbnail-creator a {
                     color: $type-gray;
                 }
+
+                a {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    word-wrap: break-word;
+                }
             }
         }
 

src/views/preview/preview.scss

@@ -503,8 +503,11 @@ $stage-width: 480px;
     .studio-list {
         flex-direction: column;
 
-        .project {
-            margin-bottom: 1.5rem;
+        .list-title {
+            margin-left: 1rem;
+            font-size: 1.2rem;
+            font-weight: bold;
+            align-self: flex-start;
         }
 
         .creator-image img {

src/views/preview/remix-list.jsx

@@ -9,7 +9,7 @@ const RemixList = props => {
     if (remixes.length === 0) return null;
     return (
         <FlexRow className="remix-list">
-            <div className="project-title">
+            <div className="list-title">
                 Remixes
             </div>
             {remixes.length === 0 ? (

src/views/preview/studio-list.jsx

@@ -8,8 +8,8 @@ const StudioList = props => {
     const studios = props.studios;
     if (studios.length === 0) return null;
     return (
-        <FlexRow className="remix-list">
-            <div className="project-title">
+        <FlexRow className="studio-list">
+            <div className="list-title">
                 Studios
             </div>
             {studios.length === 0 ? (