diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index ba2d1ad..70d2143 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -26,10 +26,12 @@
-
-
-
-
+
@@ -105,7 +107,6 @@ export default defineComponent({
display: flex;
flex-direction: column;
padding: 1rem;
- width: 23rem;
font-size: 1.5rem;
will-change: transform;
pointer-events: none;
@@ -155,16 +156,26 @@ export default defineComponent({
}
}
+ .sidebar__content {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ flex-shrink: 1;
+ min-height: 0;
+ overflow: auto;
+ pointer-events: auto;
+ margin-right: -0.5rem;
+ padding: 0.2rem 0.5rem 0 0.2rem;
+ width: 24rem;
+ align-items: flex-end;
+ }
+
.sidebar__section {
@extend %panel;
- flex: 0 1 auto;
- min-height: 10rem;
margin-bottom: 1rem;
- pointer-events: auto;
-
- &:last-child {
- margin-bottom: 0;
- }
+ box-sizing: border-box;
+ width: 100%;
+ max-width: 23rem;
.section__heading {
font-size: 2rem;
@@ -183,12 +194,8 @@ export default defineComponent({
}
.section__content {
- flex-shrink: 1;
- min-height: 0;
- overflow: auto;
padding: 0 0.5rem;
margin: 0 -.5rem 1rem;
- will-change: transform;
&:last-child {
margin-bottom: 0;
@@ -213,6 +220,11 @@ export default defineComponent({
display: none;
}
}
+
+ @media (max-width: 320px) {
+ box-sizing: border-box;
+ width: 100%;
+ }
}
@media (max-width: 480px) {
@@ -229,11 +241,6 @@ export default defineComponent({
padding-right: 6.5rem;
}
- @media (max-width: 320px) {
- box-sizing: border-box;
- width: 100%;
- }
-
@media print {
display: none;
}
diff --git a/src/components/sidebar/PlayerList.vue b/src/components/sidebar/PlayerList.vue
index 1badb06..0e5b6ef 100644
--- a/src/components/sidebar/PlayerList.vue
+++ b/src/components/sidebar/PlayerList.vue
@@ -57,9 +57,3 @@ export default defineComponent({
}
});
-
-
\ No newline at end of file