diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index 15766363e7..94a5a9a295 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -1,5 +1,5 @@ <div> - <div class="diff-detail-box diff-box sticky gt-df gt-sb gt-ac"> + <div class="diff-detail-box diff-box"> <div class="gt-df gt-ac gt-fw"> {{if not .DiffNotAvailable}} <button class="diff-toggle-file-tree-button gt-df gt-ac not-mobile" data-show-text="{{ctx.Locale.Tr "repo.diff.show_file_tree"}}" data-hide-text="{{ctx.Locale.Tr "repo.diff.hide_file_tree"}}"> diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 8e751ef88e..d0d001bf52 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -1502,14 +1502,21 @@ } .repository .diff-detail-box { + display: flex; + justify-content: space-between; + align-items: center; + position: sticky; + top: 0; + z-index: 8; padding: 7px 0; + height: 44px; /* this height should match sticky-2nd-row */ background: var(--color-body); } @media (max-width: 991.98px) { .repository .diff-detail-box { flex-direction: row; - align-items: flex-start; + height: 77px; /* this height should match sticky-2nd-row */ } } @@ -1518,18 +1525,6 @@ flex-wrap: wrap; } } - -.repository .diff-detail-box.sticky { - position: sticky; - top: 0; - z-index: 8; - border-bottom: none; - padding-left: 5px; - padding-right: 5px; - margin-left: -4px; - margin-right: -4px; -} - .repository .diff-detail-box .diff-detail-stats strong { margin-left: 0.25rem; margin-right: 0.25rem; @@ -2830,7 +2825,7 @@ tbody.commit-list { .ui.attached.header.diff-file-header.sticky-2nd-row { position: sticky; - top: 47px; /* match .repository .diff-detail-box */ + top: 44px; /* match .repository .diff-detail-box */ z-index: 7; } diff --git a/web_src/js/components/DiffFileList.vue b/web_src/js/components/DiffFileList.vue index 103526d025..8bde61804f 100644 --- a/web_src/js/components/DiffFileList.vue +++ b/web_src/js/components/DiffFileList.vue @@ -36,7 +36,7 @@ export default { }; </script> <template> - <ol class="diff-detail-box diff-stats gt-m-0" ref="root" v-if="store.fileListIsVisible"> + <ol class="diff-stats gt-m-0" ref="root" v-if="store.fileListIsVisible"> <li v-for="file in store.files" :key="file.NameHash"> <div class="gt-font-semibold gt-df gt-ac pull-right"> <span v-if="file.IsBin" class="gt-ml-1 gt-mr-3">{{ store.binaryFileMessage }}</span> diff --git a/web_src/js/components/DiffFileTree.vue b/web_src/js/components/DiffFileTree.vue index 8ee86857ac..6136f7b947 100644 --- a/web_src/js/components/DiffFileTree.vue +++ b/web_src/js/components/DiffFileTree.vue @@ -126,7 +126,7 @@ export default { }; </script> <template> - <div v-if="store.fileTreeIsVisible" class="gt-mr-3 gt-mt-3 diff-detail-box"> + <div v-if="store.fileTreeIsVisible" class="gt-mr-3"> <!-- only render the tree if we're visible. in many cases this is something that doesn't change very often --> <DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item"/> <div v-if="store.isIncomplete" class="gt-pt-2">