Create a new scss class btn-default-wide to make the button span th…

…e width of the container on mobile. Apply this style to the LoadMoreWidgetContainerView
Sage-Bionetworks · Jan 24, 2025 · e0d95d0 · e0d95d0
1 parent 908e027
commit e0d95d0
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/...in/resources/org/sagebionetworks/web/client/widget/LoadMoreWidgetContainerViewImpl.ui.xml b/...in/resources/org/sagebionetworks/web/client/widget/LoadMoreWidgetContainerViewImpl.ui.xml
@@ -8,7 +8,11 @@
   <bh:Div marginBottom="5" width="100%">
     <bh:Div ui:field="container" />
     <bh:ClearFix />
-    <b:Button ui:field="loadMoreButton" text="Show more results" />
+    <b:Button
+      ui:field="loadMoreButton"
+      text="Show more results"
+      addStyleNames="btn-default-wide"
+    />
     <w:LoadingSpinner
       ui:field="loadMoreImage"
       size="31px"

diff --git a/src/main/webapp/sass/_core.scss b/src/main/webapp/sass/_core.scss
@@ -422,6 +422,12 @@ end sticky footer
     color: $synapse-dark-text;
   }
 
+  @media (max-width: 500px) {
+    .btn-default-wide {
+      width: 100%;
+    }
+  }
+
   .btn {
     @include border-radius(2px);
     font-weight: bold;