fix(studios): share css to make load more buttons full width

Changes the markup and css classes used by activity, curators, managers and projects grids to use a
shared full-width load more button

src/views/studio/studio-activity.jsx

@@ -196,8 +196,8 @@ const StudioActivity = ({items, loading, error, moreToLoad, onLoadMore}) => {
                     getComponentForItem(item)
                 )}
             </ul>
-            <div>
-                {moreToLoad &&
+            {moreToLoad &&
+                <div className="studio-grid-load-more">
                     <button
                         className={classNames('button', {
                             'mod-mutating': loading
@@ -206,8 +206,8 @@ const StudioActivity = ({items, loading, error, moreToLoad, onLoadMore}) => {
                     >
                         <FormattedMessage id="general.loadMore" />
                     </button>
-                }
-            </div>
+                </div>
+            }
         </div>
     );
 };

src/views/studio/studio-curators.jsx

@@ -66,7 +66,7 @@ const StudioCurators = ({
                                 />)
                             )}
                             {moreToLoad &&
-                            <div className="studio-members-load-more">
+                            <div className="studio-grid-load-more">
                                 <button
                                     className={classNames('button', {
                                         'mod-mutating': loading

src/views/studio/studio-managers.jsx

@@ -103,7 +103,7 @@ const StudioManagers = ({
                         />)
                     )}
                     {moreToLoad &&
-                    <div className="studio-members-load-more">
+                    <div className="studio-grid-load-more">
                         <button
                             className={classNames('button', {
                                 'mod-mutating': loading

src/views/studio/studio-projects.jsx

@@ -105,7 +105,7 @@ const StudioProjects = ({
                                 />)
                             )}
                             {moreToLoad &&
-                            <div className="studio-projects-load-more">
+                            <div className="studio-grid-load-more">
                                 <button
                                     className={classNames('button', {
                                         'mod-mutating': loading

src/views/studio/studio.scss

@@ -147,7 +147,7 @@ $radius: 8px;
         }
 
     }
-    
+
     /* Overrides for when title and description are editable textareas. These override inplace-input */
     textarea.studio-title, textarea.studio-description {
         padding: 5px 8px;
@@ -241,14 +241,14 @@ $radius: 8px;
 
     border: 1px solid $ui-blue;
     border-radius: 1rem;
-    
+
     font-weight: bold;
     color: $ui-blue;
     font-size: 12px;
     display: flex;
     justify-content: center;
     align-items: center;
-    
+
 }
 
 .manager-threshold-message {
@@ -270,9 +270,12 @@ $radius: 8px;
     }
     column-gap: 20px;
     row-gap: 20px;
+}
 
-    .studio-projects-load-more {
-        grid-column: 1 / -1;
+.studio-grid-load-more {
+    grid-column: 1 / -1;
+    button {
+        width: 100%;
     }
 }
 
@@ -345,9 +348,6 @@ $radius: 8px;
     }
     column-gap: 20px;
     row-gap: 20px;
-    .studio-members-load-more {
-        grid-column: 1 / -1;
-    }
 }
 
 .studio-tabs {