From e0d95d0f4daec8f5978a112be503fc01d9add187 Mon Sep 17 00:00:00 2001
From: afwillia <anthony.williams@sagebase.org>
Date: Fri, 24 Jan 2025 09:55:22 -0800
Subject: [PATCH 1/2] Create a new scss class `btn-default-wide` to make the
 button span the width of the container on mobile. Apply this style to the
 LoadMoreWidgetContainerView

---
 .../client/widget/LoadMoreWidgetContainerViewImpl.ui.xml    | 6 +++++-
 src/main/webapp/sass/_core.scss                             | 6 ++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/main/resources/org/sagebionetworks/web/client/widget/LoadMoreWidgetContainerViewImpl.ui.xml b/src/main/resources/org/sagebionetworks/web/client/widget/LoadMoreWidgetContainerViewImpl.ui.xml
index 44a12a39e6..9b3eea502c 100644
--- a/src/main/resources/org/sagebionetworks/web/client/widget/LoadMoreWidgetContainerViewImpl.ui.xml
+++ b/src/main/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
index 11a5a41290..a58a66626a 100644
--- 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;

From 456b859c6358c44c6180f49a9446aa55b7588ad3 Mon Sep 17 00:00:00 2001
From: Anthony Williams <anthony.williams@sagebase.org>
Date: Mon, 27 Jan 2025 09:24:56 -0800
Subject: [PATCH 2/2] Change max-width to 768px for mobile

Co-authored-by: Nick Grosenbacher <nickgrosenbacher@gmail.com>
---
 src/main/webapp/sass/_core.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/webapp/sass/_core.scss b/src/main/webapp/sass/_core.scss
index a58a66626a..d761ede233 100644
--- a/src/main/webapp/sass/_core.scss
+++ b/src/main/webapp/sass/_core.scss
@@ -422,7 +422,7 @@ end sticky footer
     color: $synapse-dark-text;
   }
 
-  @media (max-width: 500px) {
+  @media (max-width: 768px) {
     .btn-default-wide {
       width: 100%;
     }