fix(widget-builder): New navigation bar overlapping with widget builder

[nikkikapadia]

add styling to account for new navigation bar as it was covering part of the widget builder. Was able to use resize observer to get the size of the nav bar; this way it will account for all possible sizes.

working with new navigation bar:

[codecov]

❌ 1 Tests Failed:

Tests completed	Failed	Passed	Skipped
8655	1	8654	3

View the top 1 failed test(s) by shortest run time

Dashboards > Detail custom dashboards widget builder redesign allows for creating a widget in edit mode

Stack Traces | 0.931s run time

TestingLibraryElementError: Unable to find an element with the text: Totally new widget. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
...
    at Object.getElementError (.../sentry/sentry/node_modules/@.../dom/dist/config.js:37:19)
    at .../sentry/sentry/node_modules/@.../dom/dist/query-helpers.js:76:38
    at .../sentry/sentry/node_modules/@.../dom/dist/query-helpers.js:52:17
    at .../sentry/sentry/node_modules/@.../dom/dist/query-helpers.js:95:19
    at Object.<anonymous> (.../views/dashboards/detail.spec.tsx:2411:44)

To view more test analytics, go to the Test Analytics Dashboard
_{📋 Got 3 mins? Take this short survey to help us improve Test Analytics.}

[codecov]

Bundle Report

Changes will increase total bundle size by 47.62kB (0.14%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
app-webpack-bundle-array-push	33.24MB	47.62kB (0.14%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: app-webpack-bundle-array-push

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
chunks/vendors-node_modules_emotion_styled_dist_emotion-styled_browser_esm_js-node_modules_color_ind-1ca72f.*.js	145 bytes	1.56MB	0.01%
chunks/app_bootstrap_initializeApp_tsx-app_components_avatar_actorAvatar_tsx-app_components_avatar_a-7c38cc.*.js	-556 bytes	1.41MB	-0.04%
chunks/app_components_assigneeBadge_tsx-app_components_charts_components_markLine_tsx-app_components-5ff651.*.js (New)	1.13MB	1.13MB	100.0% 🚀
chunks/vendors-node_modules_emotion_react_jsx-runtime_dist_emotion-react-jsx-runtime_browser_esm_js--736569.*.js (New)	961.77kB	961.77kB	100.0% 🚀
chunks/vendors-node_modules_base64-arraybuffer_dist_base64-arraybuffer_es5_js-node_modules_classname-ba8cb1.*.js	-8.24kB	644.15kB	-1.26%
chunks/app_actionCreators_redirectToProject_tsx-app_bootstrap_commonInitialization_tsx-app_bootstrap-d9de04.*.js	-356 bytes	434.65kB	-0.08%
chunks/app_views_issueDetails_groupEventDetails_groupEventDetails_tsx.*.js	-7.66kB	371.12kB	-2.02%
chunks/vendors-node_modules_classnames_index_js-node_modules_lodash_debounce_js-node_modules_lodash_-0bc2e8.*.js	368 bytes	308.08kB	0.12%
chunks/app_utils_discover_discoverQuery_tsx-app_views_dashboards_dashboard_tsx-app_views_dashboards_-cbfeaf.*.js	451 bytes	288.16kB	0.16%
chunks/app_views_issueDetails_groupDetails_tsx.*.js	154 bytes	174.97kB	0.09%
chunks/app_actionCreators_discoverHomepageQueries_tsx-app_components_lazyRender_tsx-app_components_n-c4bf39.*.js (New)	169.75kB	169.75kB	100.0% 🚀
chunks/app_actionCreators_members_tsx-app_components_acl_access_tsx-app_components_avatar_avatarList-1442c2.*.js	6 bytes	164.82kB	0.0%
chunks/app_components_panels_panelHeader_tsx-app_utils_profiling_hooks_useVirtualizedTree_useVirtual-bc0a9e.*.js	15 bytes	153.97kB	0.01%
chunks/vendors-node_modules_sentry-internal_rrweb_dist_rrweb_js.*.js	44 bytes	148.95kB	0.03%
chunks/app_views_traces_content_tsx-node_modules_core-js_modules_es_array_to-spliced_js.*.js	-2.43kB	119.35kB	-2.0%
chunks/vendors-node_modules_sentry-internal_rrweb-player_dist_rrweb-player_js.*.js	30 bytes	114.11kB	0.03%
chunks/app_data_timezones_tsx-app_utils_useUserTeams_tsx-app_views_alerts_builder_builderBreadCrumbs-5a6e11.*.js	29 bytes	111.93kB	0.03%
chunks/app_components_events_interfaces_crashContent_stackTrace_rawContent_tsx-app_utils_useProjectF-a8d2cf.*.js	95 bytes	107.83kB	0.09%
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_projectDetail_index_tsx.48978bbff49ceb8bc7b1.js (New)	101.08kB	101.08kB	100.0% 🚀
entrypoints/app.js	-79 bytes	99.21kB	-0.08%
chunks/app_components_core_badge_index_stories_tsx.*.js	93.3kB	97.41kB	2268.92% ⚠️
chunks/app_views_performance_transactionSummary_transactionOverview_index_tsx.*.js	62 bytes	87.39kB	0.07%
chunks/app_views_alerts_utils_index_tsx-app_views_discover_results_tsx.*.js	-34.29kB	72.65kB	-32.06%
chunks/app_views_profiling_content_tsx.*.js	87 bytes	72.52kB	0.12%
chunks/app_components_search_index_tsx.*.js	10 bytes	72.08kB	0.01%
chunks/app_views_performance_transactionSummary_transactionSpans_spanDetails_index_tsx.*.js	5 bytes	71.92kB	0.01%
chunks/app_views_performance_transactionSummary_pageLayout_tsx.*.js	43 bytes	69.24kB	0.06%
chunks/app_views_alerts_rules_utils_tsx.*.js	20 bytes	63.75kB	0.03%
chunks/app_components_charts_components_markArea_tsx-app_components_charts_eventsRequest_tsx-app_vie-b7a407.*.js	14 bytes	62.68kB	0.02%
chunks/app_utils_discover_discoverQuery_tsx-app_views_performance_vitalDetail_index_tsx.*.js	20 bytes	62.45kB	0.03%
chunks/app_views_alerts_utils_index_tsx-app_views_dashboards_manage_index_tsx-app_views_insights_dat-57be9a.*.js	87 bytes	61.94kB	0.14%
chunks/app_views_onboarding_index_tsx.*.js	135 bytes	61.1kB	0.22%
chunks/app_views_organizationStats_index_tsx.*.js	5 bytes	59.6kB	0.01%
chunks/app_views_releases_list_index_tsx.*.js	90 bytes	55.09kB	0.16%
chunks/app_utils_userselect_tsx-app_views_insights_browser_webVitals_views_pageOverview_tsx-node_mod-9505d7.*.js	-670 bytes	54.83kB	-1.21%
chunks/app_views_settings_dynamicSampling_index_tsx-node_modules_react-virtualized_dist_es_CellMeasu-6b1be5.*.js	4 bytes	48.95kB	0.01%
chunks/app_views_projectsDashboard_index_tsx-node_modules_react-virtualized_dist_es_CellMeasurer_Cel-30aaa4.*.js	108 bytes	48.42kB	0.22%
chunks/vendors-node_modules_core-js_modules_web_dom-exception_stack_js-node_modules_core-js_modules_-484e9a.*.js	44 bytes	46.98kB	0.09%
chunks/app_components_charts_components_dataZoomInside_tsx-app_components_charts_components_toolBox_-4b5dae.*.js	9 bytes	45.6kB	0.02%
chunks/app_views_stories_index_tsx.*.js	75 bytes	43.13kB	0.17%
chunks/app_views_settings_project_projectOwnership_index_tsx.*.js	19 bytes	40.44kB	0.05%
chunks/app_views_alerts_list_rules_alertRulesList_tsx-node_modules_react-virtualized_dist_es_CellMea-2d6856.*.js	34 bytes	39.88kB	0.09%
chunks/app_views_insights_mobile_screens_views_screensLandingPage_tsx-app_views_insights_pages_domai-598e4f.*.js	4 bytes	39.24kB	0.01%
chunks/app_views_alerts_wizard_index_tsx-node_modules_react-virtualized_dist_es_CellMeasurer_CellMea-4ae9b7.*.js	20 bytes	38.22kB	0.05%
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_performance_transactionSummary-51d702.14676add7ea9732c405d.js (New)	37.35kB	37.35kB	100.0% 🚀
chunks/app_views_insights_pages_backend_backendOverviewPage_tsx-node_modules_lodash_partialRight_js.*.js	254 bytes	35.97kB	0.71%
chunks/vendors-node_modules_moment-timezone_index_js-node_modules_query-string_index_js-node_modules-4a918a.*.js (New)	34.01kB	34.01kB	100.0% 🚀
chunks/app_components_compactSelect_list_tsx.*.js	1.9kB	33.36kB	6.02% ⚠️
chunks/app_views_settings_organizationDeveloperSettings_sentryApplicationDetails_tsx.*.js	5 bytes	33.27kB	0.02%
chunks/app_views_insights_common_components_modulePageFilterBar_tsx-app_views_insights_common_compon-5dd5b5.*.js	4 bytes	31.98kB	0.01%
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_insights_common_components_cha-d2aaf9.ae19193d44aef4a34442.js (New)	31.72kB	31.72kB	100.0% 🚀
chunks/app_utils_discover_discoverQuery_tsx-app_views_explore_multiQueryMode_index_tsx-app_views_per-f5e505.*.js (New)	31.37kB	31.37kB	100.0% 🚀
chunks/app_components_charts_eventsRequest_tsx-app_components_feedback_widget_us*kWidget_tsx--fbb1b9.6945d47148f5951724f8.js (New)	31.1kB	31.1kB	100.0% 🚀
chunks/app_views_alerts_filterBar_tsx-app_views_alerts_list_header_tsx.*.js	39 bytes	31.04kB	0.13%
chunks/app_views_releases_detail_index_tsx.*.js	38 bytes	31.01kB	0.12%
chunks/app_components_charts_lineChart_tsx-app_components_gridEditable_sortLink_tsx-app_components_p-2d9eb8.*.js	20 bytes	27.7kB	0.07%
chunks/app_components_charts_chartZoom_tsx-app_components_charts_lineChart_tsx-app_components_charts-21bdfd.*.js	4 bytes	27.03kB	0.01%
chunks/app_views_explore_logs_index_tsx-node_modules_echarts_lib_chart_scatter_js-node_modules_echar-5988f7.*.js	5 bytes	26.64kB	0.02%
chunks/app_components_onboarding_gettingStartedDoc_sdkDocumentation_tsx-app_components_onboarding_us-035896.*.js	-71 bytes	26.24kB	-0.27%
chunks/app_gettingStartedDocs_apple_ios_tsx.*.js	1.52kB	25.35kB	6.39% ⚠️
chunks/app_gettingStartedDocs_android_android_tsx.*.js	1.54kB	24.44kB	6.72% ⚠️
chunks/app_views_alerts_rules_uptime_details_tsx-node_modules_react-virtualized_dist_es_CellMeasurer-9c0417.*.js	55 bytes	24.23kB	0.23%
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_performance_transactionSe-feae7d.162db3f38f1609a61939.js (New)	24.18kB	24.18kB	100.0% 🚀
chunks/app_components_autoComplete_tsx-app_components_core_badge_index_tsx-app_components_loadingErr-4eb864.*.js	1.87kB	22.98kB	8.87% ⚠️
chunks/app_components_breadcrumbs_tsx-app_components_nav_constants_tsx-app_utils_replayCount_useRepl-e58484.*.js (New)	21.79kB	21.79kB	100.0% 🚀
chunks/app_views_settings_organizationMembers_organizationMemberDetail_tsx.*.js	-5 bytes	21.53kB	-0.02%
chunks/app_views_insights_common_components_headerContainer_tsx-app_views_insights_common_components-693866.*.js	4 bytes	19.84kB	0.02%
chunks/app_components_autoComplete_tsx-app_components_core_badge_index_tsx-app_components_loadingErr-852b0f.*.js	1.87kB	19.02kB	10.92% ⚠️
chunks/app_components_modals_inviteMembersModal_index_tsx-node_modules_lodash_chunk_js.*.js	21 bytes	18.6kB	0.11%
chunks/app_gettingStartedDocs_flutter_flutter_tsx.*.js	1.55kB	18.24kB	9.3% ⚠️
chunks/app_views_explore_hooks_useAnalytics_tsx-app_views_explore_hooks_useSortByFields_tsx-app_view-e48bae.*.js (New)	17.84kB	17.84kB	100.0% 🚀
chunks/app_views_insights_pages_mobile_mobileOverviewPage_tsx.*.js	4 bytes	17.42kB	0.02%
chunks/app_components_feedback_widget_us*kWidget_tsx-app_utils_discover_discoverQuery_tsx-app-c5fefe.ba9f52d768f35faa75b3.js (New)	17.3kB	17.3kB	100.0% 🚀
chunks/app_views_insights_pages_frontend_frontendOverviewPage_tsx.*.js	4 bytes	17.21kB	0.02%
chunks/app_styles_images_stories_tsx.*.js	-461 bytes	16.88kB	-2.66%
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_gridEditable_sortLink_tsx-d372f4.b132347f788f7b542dd3.js (New)	16.21kB	16.21kB	100.0% 🚀
chunks/app_gettingStartedDocs_react-native_react-native_tsx.*.js	854 bytes	16.08kB	5.61% ⚠️
chunks/app_views_insights_crons_views_overview_tsx.*.js	4 bytes	16.07kB	0.02%
chunks/app_components_compactSelect_index_tsx-app_components_layouts_thirds_tsx-app_components_loadi-b846b2.*.js	114 bytes	15.39kB	0.75%
chunks/app_views_projectInstall_platformOrIntegration_tsx.*.js	-79 bytes	14.29kB	-0.55%
chunks/SetupWizard.*.js	139 bytes	14.1kB	1.0%
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_performance_transactionSe-f61270.ad45c386bc3024b1ede5.js (New)	13.36kB	13.36kB	100.0% 🚀
chunks/app_views_detectors_detail_tsx.*.js	7.12kB	12.61kB	129.69% ⚠️
chunks/app_components_charts_lineChart_tsx-app_components_feedback_widget_us*kWidget_tsx-app_-26fc43.63c17fb682b1594f31b4.js (New)	12.34kB	12.34kB	100.0% 🚀
chunks/app_views_settings_project_tempest_index_tsx.*.js	636 bytes	12.31kB	5.45% ⚠️
chunks/app_views_issueDetails_groupUptimeChecks_tsx.*.js	89 bytes	11.05kB	0.81%
chunks/app_components_acl_access_tsx-app_components_core_badge_featureBadge_tsx-app_components_nav_p-952e53.*.js (New)	10.89kB	10.89kB	100.0% 🚀
chunks/app_components_checkInTimeline_hooks_useTimeWindowConfig_tsx-app_views_insights_uptime_compon-1fd65a.*.js	89 bytes	10.08kB	0.89%
chunks/app_components_group_groupSummary_tsx.*.js (New)	9.11kB	9.11kB	100.0% 🚀
chunks/app_views_insights_common_components_modulePageProviders_tsx-app_views_insights_pages_domainV-906f95.*.js	4 bytes	8.76kB	0.05%
chunks/app_views_settings_components_settingsNavigation_tsx.*.js	51 bytes	8.46kB	0.61%
chunks/app_views_insights_mobile_screens_views_screenDetailsPage_tsx.*.js	5 bytes	4.38kB	0.11%
chunks/app_components_workflowEngine_gridCell_connectionCell_tsx.*.js (New)	3.74kB	3.74kB	100.0% 🚀
chunks/app_components_workflowEngine_gridCell_emptyCell_tsx-app_components_workflowEngine_gridCell_t-4ac3a6.*.js (New)	3.6kB	3.6kB	100.0% 🚀
chunks/app_components_core_badge_featureBadge_stories_tsx.*.js (New)	2.02kB	2.02kB	100.0% 🚀
chunks/app_components_assigneeBadge_tsx-app_components_badge_featureBadge_tsx-app_components_charts_-643f8b.*.js (Deleted)	-1.13MB	0 bytes	-100.0% 🗑️
chunks/vendors-node_modules_emotion_react_jsx-runtime_dist_emotion-react-jsx-runtime_browser_esm_js--094051.*.js (Deleted)	-959.66kB	0 bytes	-100.0% 🗑️
chunks/app_actionCreators_discoverHomepageQueries_tsx-app_components_lazyRender_tsx-app_components_n-82613a.*.js (Deleted)	-167.92kB	0 bytes	-100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_projectDetail_index_tsx.2f90006d329061741bdc.js (Deleted)	-100.74kB	0 bytes	-100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_performance_transactionSummary-51d702.adaa0d6670569f7ebfd4.js (Deleted)	-37.35kB	0 bytes	-100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_insights_common_components_cha-d2aaf9.848ad5f9279f0719f336.js (Deleted)	-31.72kB	0 bytes	-100.0% 🗑️
chunks/app_components_charts_eventsRequest_tsx-app_components_feedback_widget_us*kWidget_tsx--fbb1b9.05f3938631a8d138005c.js (Deleted)	-31.1kB	0 bytes	-100.0% 🗑️
chunks/app_utils_discover_discoverQuery_tsx-app_views_explore_multiQueryMode_index_tsx.*.js (Deleted)	-30.45kB	0 bytes	-100.0% 🗑️
chunks/vendors-node_modules_moment-timezone_index_js-node_modules_query-string_index_js-node_modules-c3aedd.*.js (Deleted)	-29.46kB	0 bytes	-100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_performance_transactionSe-feae7d.50dce01fe3f2abb78eac.js (Deleted)	-24.18kB	0 bytes	-100.0% 🗑️
chunks/app_components_breadcrumbs_tsx-app_utils_replayCount_useReplayCount_tsx-app_views_alerts_path-ba2851.*.js (Deleted)	-21.39kB	0 bytes	-100.0% 🗑️
assets/discover-tour-explore.*.svg (Deleted)	-17.59kB	0 bytes	-100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_utils_discover_discoverQuery_tsx-app-c5fefe.2d70f3e4712874809534.js (Deleted)	-17.3kB	0 bytes	-100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_gridEditable_sortLink_tsx-d372f4.3f75872ea1715b3977c1.js (Deleted)	-16.21kB	0 bytes	-100.0% 🗑️
chunks/app_views_explore_hooks_useSortByFields_tsx-app_views_explore_hooks_useVisualizeFields_tsx-ap-9d8825.*.js (Deleted)	-13.98kB	0 bytes	-100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_performance_transactionSe-f61270.08094f4d79cc9cd31496.js (Deleted)	-13.36kB	0 bytes	-100.0% 🗑️
chunks/app_components_charts_lineChart_tsx-app_components_feedback_widget_us*kWidget_tsx-app_-26fc43.db2dd5468be3cf116044.js (Deleted)	-12.34kB	0 bytes	-100.0% 🗑️
chunks/app_components_acl_access_tsx-app_components_badge_featureBadge_tsx-app_components_nav_prefer-030759.*.js (Deleted)	-10.94kB	0 bytes	-100.0% 🗑️
chunks/images_spot_discover-tour-group_svg.*.js (Deleted)	-7.5kB	0 bytes	-100.0% 🗑️
chunks/images_spot_discover-tour-alert_svg.*.js (Deleted)	-7.12kB	0 bytes	-100.0% 🗑️
chunks/app_components_workflowEngine_gridCell_connectionCell_tsx-app_components_workflowEngine_gridC-3e0bc8.*.js (Deleted)	-6.58kB	0 bytes	-100.0% 🗑️
chunks/images_spot_discover-tour-filter_svg.*.js (Deleted)	-3.87kB	0 bytes	-100.0% 🗑️
chunks/app_components_badge_featureBadge_stories_tsx.*.js (Deleted)	-1.99kB	0 bytes	-100.0% 🗑️
chunks/images_spot_discover-tour-explore_svg.*.js (Deleted)	-728 bytes	0 bytes	-100.0% 🗑️