Merge pull request #5639 from kianamcc/SWC-7188

Author: nickgros

src/main/java/org/sagebionetworks/web/client/widget/discussion/ForumWidgetViewImpl.java

@@ -132,16 +132,12 @@ private void setSearchResultsVisible(boolean searchResultsVisible) {
 
     if (searchResultsVisible) {
       forumSearchFlexContainer.addStyleName("flexcontainer-column-fill-width");
-      forumSearchFlexContainer.removeStyleName(
-        "flexcontainer-align-items-flex-end"
-      );
+      forumSearchFlexContainer.removeStyleName("flexcontainer-xs-align-end");
     } else {
       forumSearchFlexContainer.removeStyleName(
         "flexcontainer-column-fill-width"
       );
-      forumSearchFlexContainer.addStyleName(
-        "flexcontainer-align-items-flex-end"
-      );
+      forumSearchFlexContainer.addStyleName("flexcontainer-xs-align-end");
     }
   }
 

src/main/resources/org/sagebionetworks/web/client/widget/discussion/ForumWidgetViewImpl.ui.xml

@@ -7,7 +7,7 @@
   xmlns:bh="urn:import:org.gwtbootstrap3.client.ui.html"
 >
   <bh:Div>
-    <bh:Div addStyleNames="flexcontainer-row">
+    <bh:Div addStyleNames="flexcontainer-row-unless-xs margin-bottom-20">
       <bh:Div
         ui:field="headingFlexContainer"
         addStyleNames="flexcontainer-column flexcontainer-column-fill-width"
@@ -27,37 +27,37 @@
       </bh:Div>
       <bh:Div
         ui:field="subscribersFlexContainer"
-        addStyleNames="flexcontainer-column flexcontainer-align-items-flex-end min-width-70"
+        addStyleNames="flexcontainer-column flexcontainer-xs-align-end"
         marginRight="10"
+        marginLeft="10"
       >
         <bh:Span ui:field="subscribersContainer" addStyleNames="movedown-7" />
       </bh:Div>
       <bh:Div
         ui:field="forumSearchFlexContainer"
-        addStyleNames="flexcontainer-column flexcontainer-align-items-flex-end"
+        addStyleNames="flexcontainer-column flexcontainer-xs-align-end"
         marginRight="10"
       >
         <bh:Div ui:field="forumSearchContainer" />
       </bh:Div>
       <bh:Div
         ui:field="subscribeButtonFlexContainer"
-        addStyleNames="flexcontainer-column flexcontainer-align-items-flex-end min-width-70"
+        addStyleNames="flexcontainer-column flexcontainer-xs-align-end"
         marginRight="10"
       >
         <bh:Span ui:field="subscribeButtonContainer" />
       </bh:Div>
       <bh:Div
         ui:field="newThreadButtonFlexContainer"
-        addStyleNames="flexcontainer-column flexcontainer-align-items-flex-end min-width-70"
+        addStyleNames="flexcontainer-column flexcontainer-xs-align-end"
         marginRight="10"
       >
         <b:Button ui:field="newThreadButton" type="PRIMARY">
           New Thread
         </b:Button>
       </bh:Div>
-
       <bh:Div
-        addStyleNames="flexcontainer-column flexcontainer-align-items-flex-end min-width-70"
+        addStyleNames="flexcontainer-column flexcontainer-xs-align-end full-width-button full-width-xs-only"
         ui:field="actionMenuContainer"
       />
     </bh:Div>

src/main/resources/org/sagebionetworks/web/client/widget/entity/WikiPageWidgetViewImpl.ui.xml

@@ -11,12 +11,11 @@
     <g:FlowPanel ui:field="mainPanel">
       <g:FlowPanel ui:field="wikiSubpagesPanel" />
       <g:FlowPanel ui:field="wikiPagePanel">
-        <bh:Div addStyleNames="flexcontainer-row margin-bottom-10">
-          <bh:Div
-            addStyleNames="flexcontainer-column flexcontainer-column-fill-width"
-          />
+        <bh:Div
+          addStyleNames="flexcontainer-row margin-bottom-20 flexcontainer-center-xs-justify-end"
+        >
           <bh:Div
-            addStyleNames="flexcontainer-column flexcontainer-align-items-flex-end min-width-70"
+            addStyleNames="full-width-xs-only"
             ui:field="actionMenuContainer"
           />
         </bh:Div>

src/main/resources/org/sagebionetworks/web/client/widget/entity/browse/FilesBrowserViewImpl.ui.xml

@@ -8,18 +8,15 @@
   <bh:Div addStyleNames="filesBrowser margin-top-15">
     <bh:Div
       ui:field="commandsContainer"
-      addStyleNames="flexcontainer-row"
+      addStyleNames="flexcontainer-row-unless-xs"
       marginBottom="10"
     >
       <bh:Div
         addStyleNames="flexcontainer-column flexcontainer-column-fill-width"
       >
         <b:Heading size="H3" ui:field="title" text="Files" visible="false" />
       </bh:Div>
-      <bh:Div
-        addStyleNames="flexcontainer-column flexcontainer-align-items-flex-end"
-        ui:field="actionMenuContainer"
-      />
+      <bh:Div ui:field="actionMenuContainer" />
     </bh:Div>
     <bh:Div ui:field="addToDownloadListContainer" />
     <bh:Div ui:field="reactFileBrowserContainer" />

src/main/resources/org/sagebionetworks/web/client/widget/entity/tabs/DockerTabViewImpl.ui.xml

@@ -13,7 +13,7 @@
       ui:field="projectLevelUi"
       addStyleNames="margin-top-15 entity-page-side-margins"
     >
-      <bh:Div addStyleNames="flexcontainer-row">
+      <bh:Div addStyleNames="flexcontainer-row-unless-xs margin-bottom-20">
         <bh:Div
           addStyleNames="flexcontainer-column flexcontainer-column-fill-width"
         >
@@ -24,10 +24,7 @@
             addStyleNames="margin-bottom-20"
           />
         </bh:Div>
-        <bh:Div
-          addStyleNames="flexcontainer-column flexcontainer-align-items-flex-end min-width-70"
-          ui:field="actionMenuContainer"
-        />
+        <bh:Div ui:field="actionMenuContainer" />
       </bh:Div>
       <g:SimplePanel ui:field="dockerRepoListWidgetContainer" />
     </g:FlowPanel>

src/main/resources/org/sagebionetworks/web/client/widget/entity/tabs/TablesTabViewImpl.ui.xml

@@ -27,21 +27,21 @@
     <bh:Div addStyleNames="margin-top-15 entity-page-side-margins">
       <bh:Div
         ui:field="projectLevelUI"
-        addStyleNames="flexcontainer-row flexcontainer-align-items-center"
+        addStyleNames="flexcontainer-row-unless-xs margin-bottom-20"
       >
         <bh:Div
           addStyleNames="flexcontainer-column flexcontainer-column-fill-width"
         >
           <bh:Div>
             <b:Heading size="H3" ui:field="title" />
-            <bh:Div addStyleNames="margin-bottom-20">
+            <bh:Div>
               <bh:Span ui:field="tableDescription" />
               <b:Anchor ui:field="helpLink" />
             </bh:Div>
           </bh:Div>
         </bh:Div>
         <bh:Div
-          addStyleNames="flexcontainer-column flexcontainer-align-items-flex-end min-width-70"
+          addStyleNames="full-width-xs-only"
           ui:field="actionMenuContainer"
         />
       </bh:Div>

src/main/resources/org/sagebionetworks/web/client/widget/subscription/SubscribeButtonWidgetViewImpl.ui.xml

@@ -10,6 +10,7 @@
       type="PRIMARY"
       visible="false"
       dataLoadingText="Updating..."
+      addStyleNames="full-width-xs-only"
     >
       Follow
     </b:Button>
@@ -18,6 +19,7 @@
       type="DEFAULT"
       visible="false"
       dataLoadingText="Updating..."
+      addStyleNames="full-width-xs-only"
     >
       Unfollow
     </b:Button>

src/main/webapp/sass/_core.scss

@@ -930,6 +930,17 @@ input[type='text'][readonly].border-none,
   vertical-align: bottom;
 }
 
+@media (max-width: 768px) {
+  .full-width-xs-only {
+    min-width: 100%;
+  }
+
+  .full-width-button .MuiButton-root,
+  .full-width-button .MuiBox-root {
+    width: 100%;
+  }
+}
+
 .min-height-400 {
   min-height: 400px;
 }
@@ -2007,19 +2018,23 @@ input[type='text'].padding-0 {
     flex-direction: row;
   }
 
-  @media (min-width: 769px) {
-    .flexcontainer-row-unless-xs {
-      display: flex;
-      flex-direction: row;
-    }
-  }
-  @media (max-width: 768px) {
-    .flexcontainer-row-unless-xs {
+  .flexcontainer-row-unless-xs {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    @media (max-width: 768px) {
       display: flex;
       flex-direction: column;
+      flex-wrap: nowrap;
+      gap: 20px;
     }
   }
 
+  .flexcontainer-wrap {
+    flex-wrap: wrap;
+  }
+
   .flexcontainer-align-items-center {
     align-items: center;
   }
@@ -2032,6 +2047,12 @@ input[type='text'].padding-0 {
     align-items: flex-end;
   }
 
+  @media (min-width: 900px) {
+    .flexcontainer-xs-align-end {
+      align-items: flex-end;
+    }
+  }
+
   .flexcontainer-column {
     display: -webkit-flex;
     display: flex;
@@ -2049,6 +2070,13 @@ input[type='text'].padding-0 {
     justify-content: flex-end;
   }
 
+  @media (min-width: 768px) {
+    .flexcontainer-center-xs-justify-end {
+      -webkit-justify-content: flex-end;
+      justify-content: flex-end;
+    }
+  }
+
   .flexcontainer-justify-space-between {
     -webkit-justify-content: space-between;
     justify-content: space-between;
@@ -2057,6 +2085,7 @@ input[type='text'].padding-0 {
   .flexcontainer-column-fill-width {
     flex-grow: 1;
   }
+
   .flexcontainer-column-flow-reset {
     flex-flow: inherit;
   }