fix(svelte): Reference panel width (#63310)

Fixes srch-584

When the reference panel preview opens, the bottom panel extends beyond
its boundaries and ist partially hidden. Allowing it to shrink past it's
content width fixes it.

| Before | Header |
|--------|--------|
|
![2024-06-18_11-22](https://github.com/sourcegraph/sourcegraph/assets/179026/33224c07-946e-4662-bba3-1ce5cf35d834)|
![2024-06-18_11-23](https://github.com/sourcegraph/sourcegraph/assets/179026/3d976506-23e4-4e53-8c8f-e82d189960d9)
|

## Test plan

Manual testing
This commit is contained in:
Felix Kling 2024-06-18 16:03:46 +02:00 committed by GitHub
parent 3437f8253d
commit 978cf37f48
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -286,7 +286,7 @@
onCollapse={handleBottomPanelCollapse}
let:isCollapsed
>
<div class="bottom-panel">
<div class="bottom-panel" class:collapsed={isCollapsed}>
<Tabs selected={selectedTab} toggable on:select={selectTab}>
<svelte:fragment slot="header-actions">
{#if !isCollapsed}
@ -367,37 +367,37 @@
flex-direction: column;
overflow: hidden;
background-color: var(--color-bg-1);
}
.collapsed {
flex-direction: column;
align-items: center;
header {
flex-wrap: nowrap;
}
header,
.sidebar-action-row {
&.collapsed {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
width: 100%;
}
align-items: center;
// Hide action text and leave just icon for collapsed version
.search-files-button {
display: block;
header {
flex-wrap: nowrap;
}
span {
header,
.sidebar-action-row {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
width: 100%;
}
// Hide action text and leave just icon for collapsed version
.search-files-button {
display: block;
span {
display: none;
}
}
:global([data-repo-rev-picker-trigger]),
.sidebar-file-tree {
display: none;
}
}
:global([data-repo-rev-picker-trigger]),
.sidebar-file-tree {
display: none;
}
}
header {
@ -473,6 +473,13 @@
:global([data-tabs]) {
flex: 1;
min-width: 0;
}
&.collapsed :global([data-tabs]) {
// Reset min-width otherwise very long commit messages will overflow
// the tabs.
min-width: initial;
}
.last-commit {