From 0097fbc2ac153a686b68af43e791704e9b5cf74b Mon Sep 17 00:00:00 2001
From: Gusted <williamzijl7@hotmail.com>
Date: Sun, 12 Jun 2022 11:30:22 +0200
Subject: [PATCH] Improve file header on mobile (#19945)
- File headers can become quite width, so ensure the file size is not
being wrapped into itself(width + padding-right) and allow the overflow
to be scrolled(overflow-x).
---
templates/repo/view_file.tmpl | 2 +-
web_src/less/_repository.less | 4 +++-
2 files changed, 4 insertions(+), 2 deletions(-)
diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl
index c5efd3d2d4..fe5cb7b170 100644
--- a/templates/repo/view_file.tmpl
+++ b/templates/repo/view_file.tmpl
@@ -1,6 +1,6 @@
<div class="{{TabSizeClass .Editorconfig .FileName}} non-diff-file-content">
<h4 class="file-header ui top attached header df ac sb">
- <div class="file-header-left df ac">
+ <div class="file-header-left df ac pr-4">
{{if .ReadmeInList}}
{{svg "octicon-book" 16 "mr-3"}}
<strong>{{.FileName}}</strong>
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 37a5017fbd..2686c0d280 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -3048,9 +3048,10 @@ td.blob-excerpt {
}
.file-header {
+ align-items: center;
display: flex;
justify-content: space-between;
- align-items: center;
+ overflow-x: scroll;
padding: 8px 12px !important;
}
@@ -3062,6 +3063,7 @@ td.blob-excerpt {
.file-info-entry {
display: flex;
align-items: center;
+ width: max-content;
}
.file-info-entry + .file-info-entry {