Deploy May 22, 2025 (#5471)

[Carla Severe] Make the sidebar start out closed on mobile screens
(#5464)
[Carla Severe] Make the tab bar scrollable to allow accessing tabs on
narrow page widths (mobile layout) (#5463)
[depfu[bot]] Update all Yarn dependencies (2025-05-21) (#5466)

Author: canova

package.json

@@ -83,7 +83,7 @@
     "core-js": "^3.42.0",
     "escape-string-regexp": "^4.0.0",
     "gecko-profiler-demangle": "^0.3.3",
-    "idb": "^8.0.2",
+    "idb": "^8.0.3",
     "jszip": "^3.10.1",
     "long": "^5.3.2",
     "memoize-immutable": "^3.0.0",
@@ -132,20 +132,20 @@
     "copy-webpack-plugin": "^13.0.0",
     "cross-env": "^7.0.3",
     "css-loader": "^7.1.2",
-    "cssnano": "^7.0.6",
+    "cssnano": "^7.0.7",
     "devtools-license-check": "^0.9.0",
     "eslint": "^8.57.1",
-    "eslint-config-prettier": "^10.1.2",
+    "eslint-config-prettier": "^10.1.5",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jest": "^28.11.0",
     "eslint-plugin-jest-dom": "^5.5.0",
     "eslint-plugin-jest-formatting": "^3.1.0",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-testing-library": "^7.1.1",
+    "eslint-plugin-testing-library": "^7.2.1",
     "espree": "^10.3.0",
-    "fake-indexeddb": "^6.0.0",
+    "fake-indexeddb": "^6.0.1",
     "fetch-mock-jest": "^1.5.1",
     "file-loader": "^6.2.0",
     "flow-bin": "^0.96.0",
@@ -161,7 +161,7 @@
     "mkdirp": "^3.0.1",
     "node-fetch": "^2.6.11",
     "npm-run-all2": "^8.0.1",
-    "open": "^10.1.1",
+    "open": "^10.1.2",
     "postcss": "^8.5.3",
     "postcss-loader": "^8.1.1",
     "prettier": "^3.5.3",

src/components/app/Details.js

@@ -49,6 +49,8 @@ type DispatchProps = {|
 
 type Props = ConnectedProps<{||}, StateProps, DispatchProps>;
 
+const SMALL_SCREEN_WIDTH = 768;
+
 class ProfileViewerImpl extends PureComponent<Props> {
   _onSelectTab = (selectedTab: string) => {
     const { changeSelectedTab } = this.props;
@@ -64,6 +66,15 @@ class ProfileViewerImpl extends PureComponent<Props> {
     changeSidebarOpenState(selectedTab, !isSidebarOpen);
   };
 
+  componentDidMount() {
+    const width = window.innerWidth;
+    const { selectedTab, isSidebarOpen, changeSidebarOpenState } = this.props;
+
+    if (width <= SMALL_SCREEN_WIDTH && isSidebarOpen) {
+      changeSidebarOpenState(selectedTab, false);
+    }
+  }
+
   render() {
     const { visibleTabs, selectedTab, isSidebarOpen } = this.props;
     const hasSidebar = selectSidebar(selectedTab) !== null;

src/components/app/TabBar.css

@@ -17,20 +17,23 @@
 
 .tabBarTabWrapper {
   display: flex;
+  overflow: auto hidden;
   min-width: 0; /* This makes the tab container actually shrinkable below min-content */
+  flex: 1;
   flex-flow: row nowrap;
   padding: 0;
-  margin: 0 -0.5px; /* This combines with the -0.5px horizontal margin of .tabBarTab to clip off the first tab's 1px starting border */
+  margin: 0 -0.5px -1px; /* The -0.5px horizontal margin combines with the -0.5px horizontal margin of .tabBarTab to clip off the first tab's 1px starting border. The -1px bottom margin makes our contents overlap the .Details-top-bar bottom border, so that the selected tab can cover that bottom border. */
   list-style: none;
+  scrollbar-width: none;
 }
 
 .tabBarTab {
   position: relative;
   min-width: 8em;
-  padding: 6px 4px;
+  padding: 6px 4px 5px;
   border: solid transparent;
   border-width: 0 1px;
-  margin: 0 -0.5px; /* This makes the 1px border between adjacent tabs overlap */
+  margin: 0 -0.5px 1px; /* The -0.5px horizontal margin makes the 1px border between adjacent tabs overlap. The 1px bottom margin makes space for the .Details-top-bar bottom border. */
   background-clip: padding-box;
   cursor: default;
   font-size: 12px;
@@ -74,8 +77,9 @@
 
 .tabBarTab.selected {
   z-index: 1;
+  padding: 6px 4px;
   border-color: var(--grey-30);
-  margin-bottom: -1px; /* Expand 1px towards the bottom to cover the tab bar bottom border. */
+  margin: 0 -0.5px; /* No bottom margin, so that this tab covers the .Details-top-bar bottom border. */
   background: #fff;
   color: var(--blue-60);
   transition: none; /* Switch the background color instantly when a tab is selected */

src/components/shared/MarkerSettings.css

@@ -4,10 +4,13 @@
 
 .markerSettings {
   display: flex;
+  overflow: auto hidden;
   height: 25px;
   flex-flow: row nowrap;
   padding: 0;
   line-height: 25px;
+  scrollbar-width: none;
+  white-space: nowrap;
 }
 
 .filterMarkersButton {

src/components/shared/StackSettings.css

@@ -4,10 +4,12 @@
 
 .stackSettings {
   display: flex;
+  overflow: auto hidden;
   height: 25px;
   flex-flow: row nowrap;
   align-items: stretch;
   padding: 0;
+  scrollbar-width: none;
   white-space: nowrap;
 }