From ef798d4b84ae17b3b45221e828112a9bd992757e Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 26 Feb 2020 21:44:14 +0100
Subject: [PATCH] Tweak language stats bar (#10487)

- Ensure bar does not overflow parent
- Remove unneccessary borders/background
- Fix shaky animation caused by JS animation miscalculation by setting
  fixed height on the summary box. Box itself is still shaky during
  animation, but better it then the whole page.

Fixes: https://github.com/go-gitea/gitea/issues/10474
---
 templates/repo/sub_menu.tmpl  |  2 +-
 web_src/less/_repository.less | 34 +++++++++++++++++++++++-----------
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/templates/repo/sub_menu.tmpl b/templates/repo/sub_menu.tmpl
index 51d8d26c30..cd000d4744 100644
--- a/templates/repo/sub_menu.tmpl
+++ b/templates/repo/sub_menu.tmpl
@@ -1,4 +1,4 @@
-<div class="ui segments">
+<div class="ui segments repository-summary">
 	<div class="ui segment sub-menu repository-menu">
 		<div class="ui two horizontal center link list">
 			{{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo)}}
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 6c715ee5e3..7618a4d763 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -2011,19 +2011,31 @@
         }
     }
 
-    .segment.language-stats {
-        padding: 0;
-        height: .6em;
-        display: flex;
-        white-space: nowrap;
-        width: 100%;
+    .repository-summary {
+        height: 48px;
+        overflow: hidden;
 
-        .bar {
-            white-space: nowrap;
-            border: 0;
+        .segment.language-stats-details,
+        .segment.repository-summary {
+            border-top: none;
+            background: none;
+        }
+
+        .segment.language-stats {
             padding: 0;
-            margin: 0;
-            height: .6em;
+            height: 11px;
+            display: flex;
+            white-space: nowrap;
+            width: 100%;
+            border-radius: 0;
+
+            .bar {
+                white-space: nowrap;
+                border: 0;
+                padding: 0;
+                margin: 0;
+                height: 100%;
+            }
         }
     }
 }