diff --git a/templates/repo/sub_menu.tmpl b/templates/repo/sub_menu.tmpl
index 598cfc5c80..ee1b959a7c 100644
--- a/templates/repo/sub_menu.tmpl
+++ b/templates/repo/sub_menu.tmpl
@@ -20,7 +20,12 @@
 		{{end}}
 	</div>
 	{{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo) .LanguageStats}}
-	<div class="ui segment sub-menu language-stats-details tw-hidden">
+	<a class="ui segment show-panel toggle" id="language-stats-bar" data-panel="#language-stats-legend">
+		{{range .LanguageStats}}
+		<div class="bar" style="width: {{.Percentage}}%; background-color: {{.Color}}" data-tooltip-placement="top" data-tooltip-content={{.Language}} data-tooltip-follow-cursor="horizontal"></div>
+		{{end}}
+	</a>
+	<div class="ui segment sub-menu tw-hidden" id="language-stats-legend">
 		{{range .LanguageStats}}
 		<div class="item">
 			<i class="color-icon" style="background-color: {{.Color}}"></i>
@@ -35,11 +40,6 @@
 		</div>
 		{{end}}
 	</div>
-	<a class="ui segment language-stats show-panel toggle" data-panel=".repository-summary > .sub-menu">
-		{{range .LanguageStats}}
-		<div class="bar" style="width: {{.Percentage}}%; background-color: {{.Color}}" data-tooltip-placement="top" data-tooltip-content={{.Language}} data-tooltip-follow-cursor="horizontal"></div>
-		{{end}}
-	</a>
 	{{end}}
 </div>
 {{end}}
diff --git a/tests/e2e/repo-home.e2e.ts b/tests/e2e/repo-home.e2e.ts
new file mode 100644
index 0000000000..fbcfe17226
--- /dev/null
+++ b/tests/e2e/repo-home.e2e.ts
@@ -0,0 +1,19 @@
+// @watch start
+// web_src/js/features/common-global.js
+// web_src/css/repo.css
+// @watch end
+
+import {expect} from '@playwright/test';
+import {save_visual, test} from './utils_e2e.ts';
+
+test('Language stats bar', async ({page}) => {
+  const response = await page.goto('/user2/repo1');
+  expect(response?.status()).toBe(200);
+
+  await expect(page.locator('#language-stats-legend')).toBeVisible();
+  await save_visual(page);
+
+  await page.click('#language-stats-bar');
+  await expect(page.locator('#language-stats-legend')).toBeHidden();
+  await save_visual(page);
+});
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index b8cd3c08bb..bdb09eb776 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -2022,13 +2022,14 @@ details.repo-search-result summary::marker {
   font-weight: var(--font-weight-medium);
 }
 
-.repository .repository-summary .segment.language-stats {
+.repository .repository-summary #language-stats-bar {
   display: flex;
   gap: 2px;
   padding: 0;
   height: 10px;
   white-space: nowrap;
-  border-radius: 0 0 3px 3px !important;
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
   overflow: hidden;
 }