fix: data source selector in dev tools tab moved to left (#7347) (#7353)

* fix: style issue that data source selector in dev tools tab moved to left * Changeset file for PR #7347 created/updated --------- (cherry picked from commit 9ce538a) Signed-off-by: Yulong Ruan <[email protected]> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
opensearch-project · Jul 22, 2024 · d59e3ea · d59e3ea
1 parent 8a6da4c
commit d59e3ea
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git a/changelogs/fragments/7347.yml b/changelogs/fragments/7347.yml
@@ -0,0 +1,2 @@
+fix:
+- Data source selector in dev tools tab moved to left ([#7347](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7347))
diff --git a/src/plugins/dev_tools/public/application.tsx b/src/plugins/dev_tools/public/application.tsx
@@ -124,6 +124,7 @@ function DevToolsWrapper({
           onSelectedDataSource={onChange}
           disabled={!dataSourceEnabled}
           fullWidth={false}
+          compressed
         />
       </div>
     );

diff --git a/src/plugins/dev_tools/public/index.scss b/src/plugins/dev_tools/public/index.scss
@@ -23,6 +23,12 @@
 }
 
 .devAppDataSourceSelector {
-  margin: 7px 8px 0 0;
+  margin: 4px 8px 0 0;
   min-width: 400px;
+  margin-left: auto;
+}
+
+.devAppTabs {
+  display: flex;
+  flex-flow: row wrap;
 }