Merge pull request #5647 from kianamcc/SWC-7185

SWC-7185: SWC EntityTreeBrowser (EntityBadge) updates on mobile
Sage-Bionetworks · Mar 3, 2025 · 5094228 · 5094228
2 parents da8f72a + 6c0fcec
commit 5094228
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
diff --git a/src/main/java/org/sagebionetworks/web/client/widget/entity/EntityBadgeViewImpl.java b/src/main/java/org/sagebionetworks/web/client/widget/entity/EntityBadgeViewImpl.java
@@ -180,7 +180,7 @@ public void setEntity(final EntityHeader entityHeader) {
       entityAnchor.addClickHandler(STANDARD_CLICKHANDLER);
     entityAnchor.setText(entityHeader.getName());
     entityAnchor.addStyleName(
-      "text-align-left text-overflow-ellipsis inline-block whitespace-nowrap overflowHidden maxWidth100"
+      "text-align-left text-overflow-ellipsis inline-block whitespace-nowrap overflowHidden max-width-100percent-unless-xs"
     );
     entityAnchor.setHref("/Synapse:" + entityHeader.getId());
     entityAnchor

diff --git a/src/main/resources/org/sagebionetworks/web/client/widget/entity/EntityBadgeViewImpl.ui.xml b/src/main/resources/org/sagebionetworks/web/client/widget/entity/EntityBadgeViewImpl.ui.xml
@@ -9,7 +9,7 @@
   <t:Table width="100%" height="36px" addStyleNames="entityBadge">
     <t:TableRow>
       <t:TableData
-        addStyleNames="min-width-30 text-align-center overflow-x-hidden"
+        addStyleNames="min-width-30 text-align-center overflow-x-hidden hidden-xs"
         width="30px"
       >
         <g:FocusPanel ui:field="entityTypeIconContainer">
@@ -23,7 +23,7 @@
         />
       </t:TableData>
       <t:TableData
-        addStyleNames="overflow-x-hidden min-width-140"
+        addStyleNames="overflow-x-hidden min-width-140 hidden-xs"
         width="140px"
       >
         <w:ReactComponent ui:field="iconsContainer" />

diff --git a/src/main/webapp/sass/_core.scss b/src/main/webapp/sass/_core.scss
@@ -2501,6 +2501,9 @@ i.fa.small-icon {
   .min-width-200-unless-xs {
     min-width: 200px;
   }
+  .max-width-100percent-unless-xs {
+    max-width: 100%;
+  }
 }
 @media (max-width: 500px) {
   .hidden-xxs {