Fixed various scrolling issues

package.json

@@ -11,6 +11,7 @@
 		"core-js": "^3.6.5",
 		"lodash.clonedeep": "^4.5.0",
 		"portal-vue": "^2.1.7",
+		"simplebar-vue": "^1.6.4",
 		"vue": "^2.6.11",
 		"vue-frag": "^1.1.5",
 		"vue-reactive-provide": "^0.3.0",
@@ -18,7 +19,6 @@
 		"vue-sortable": "github:Netbel/vue-sortable#master-fix",
 		"vue-textarea-autosize": "^1.1.1",
 		"vue-transition-expand": "^0.1.0",
-		"vue2-perfect-scrollbar": "^1.5.0",
 		"vuex": "^3.4.0"
 	},
 	"devDependencies": {

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-	<div id="app" @mousemove="updateMouse" :style="theme">
+	<div id="app" @mousemove="updateMouse" :style="theme" :class="{ useHeader }">
 		<Nav />
 		<Tabs />
 		<TPS v-if="showTPS" />
@@ -16,6 +16,7 @@ import TPS from './components/system/TPS';
 import themes from './data/themes';
 import { mapState } from 'vuex';
 import { player } from './store/proxies';
+import modInfo from './data/modInfo.json';
 import './main.css';
 
 export default {
@@ -23,6 +24,9 @@ export default {
 	components: {
 		Nav, Tabs, TPS
 	},
+	data() {
+		return { useHeader: modInfo.useHeader };
+	},
 	computed: {
 		...mapState([ 'showTPS' ]),
 		theme() {

src/components/common/scrollbar.css

@@ -0,0 +1,11 @@
+#app .simplebar-scrollbar:before {
+	background:  #eee;
+}
+
+.simplebar-horizontal.simplebar-hover,
+.simplebar-horizontal.simplebar-hover .simplebar-scrollbar {
+	height: 22px;
+}
+.simplebar-vertical.simplebar-hover {
+	width: 22px;
+}

src/components/features/Achievement.vue

@@ -12,7 +12,6 @@
 <script>
 import { layers } from '../../store/layers';
 import { coerceComponent } from '../../util/vue';
-import './features.css';
 
 export default {
 	name: 'achievement',

src/components/features/Achievements.vue

@@ -16,7 +16,6 @@
 <script>
 import { layers } from '../../store/layers';
 import { getFiltered } from '../../util/vue';
-import './table.css';
 
 export default {
 	name: 'achievements',

src/components/features/Buyable.vue

@@ -30,7 +30,6 @@
 import { layers } from '../../store/layers';
 import { player } from '../../store/proxies';
 import { coerceComponent } from '../../util/vue';
-import './features.css';
 
 export default {
 	name: 'buyable',

src/components/features/Buyables.vue

@@ -21,7 +21,6 @@
 import { layers } from '../../store/layers';
 import { player } from '../../store/proxies';
 import { getFiltered } from '../../util/vue';
-import './table.css';
 
 export default {
 	name: 'buyables',

src/components/features/Challenge.vue

@@ -22,7 +22,6 @@
 <script>
 import { layers } from '../../store/layers';
 import { coerceComponent } from '../../util/vue';
-import './features.css';
 
 export default {
 	name: 'challenge',

src/components/features/Challenges.vue

@@ -16,7 +16,6 @@
 <script>
 import { layers } from '../../store/layers';
 import { getFiltered } from '../../util/vue';
-import './table.css';
 
 export default {
 	name: 'challenges',

src/components/features/Clickable.vue

@@ -16,7 +16,6 @@
 <script>
 import { layers } from '../../store/layers';
 import { coerceComponent } from '../../util/vue';
-import './features.css';
 
 export default {
 	name: 'clickable',

src/components/features/Clickables.vue

@@ -19,7 +19,6 @@
 <script>
 import { layers } from '../../store/layers';
 import { getFiltered } from '../../util/vue';
-import './table.css';
 
 export default {
 	name: 'clickables',

src/components/features/DefaultPrestigeButtonDisplay.vue

@@ -2,7 +2,7 @@
 	<span>
 		{{ resetDescription }}<b>{{ resetGain }}</b>
 		{{ resource }}
-		<br/><br/>
+		<br v-if="nextAt"/><br v-if="nextAt"/>
 		{{ nextAt }}
 	</span>
 </template>

src/components/features/Grid.vue

@@ -10,7 +10,6 @@
 
 <script>
 import { layers } from '../../store/layers';
-import './table.css';
 
 export default {
 	name: 'grid',

src/components/features/Gridable.vue

@@ -11,7 +11,6 @@
 <script>
 import { layers } from '../../store/layers';
 import { coerceComponent } from '../../util/vue';
-import './features.css';
 
 export default {
 	name: 'gridable',

src/components/features/Milestone.vue

@@ -10,7 +10,6 @@
 <script>
 import { layers } from '../../store/layers';
 import { coerceComponent } from '../../util/vue';
-import './features.css';
 
 export default {
 	name: 'milestone',

src/components/features/Milestones.vue

@@ -7,7 +7,6 @@
 <script>
 import { layers } from '../../store/layers';
 import { getFiltered } from '../../util/vue';
-import './table.css';
 
 export default {
 	name: 'milestones',

src/components/features/PrestigeButton.vue

@@ -10,7 +10,6 @@
 import { layers } from '../../store/layers';
 import { resetLayer } from '../../util/layers';
 import { coerceComponent } from '../../util/vue';
-import './features.css'
 
 export default {
 	name: 'prestige-button',

src/components/features/RespecButton.vue

@@ -33,7 +33,6 @@
 import { layers } from '../../store/layers';
 import { player } from '../../store/proxies';
 import { coerceComponent } from '../../util/vue';
-import './features.css';
 
 export default {
 	name: 'respec-button',

src/components/features/Upgrade.vue

@@ -17,7 +17,6 @@
 <script>
 import { layers } from '../../store/layers';
 import { coerceComponent } from '../../util/vue';
-import './features.css';
 
 export default {
 	name: 'upgrade',

src/components/features/Upgrades.vue

@@ -16,7 +16,6 @@
 <script>
 import { layers } from '../../store/layers';
 import { getFiltered } from '../../util/vue';
-import './table.css';
 
 export default {
 	name: 'upgrades',

src/components/fields/Select.vue

@@ -7,7 +7,6 @@
 
 <script>
 import vSelect from 'vue-select';
-import './fields.css';
 import 'vue-select/dist/vue-select.css';
 
 export default {

src/components/fields/Slider.vue

@@ -8,8 +8,6 @@
 </template>
 
 <script>
-import './fields.css';
-
 export default {
 	name: 'Slider',
 	props: {

src/components/fields/Text.vue

@@ -11,8 +11,6 @@
 </template>
 
 <script>
-import './fields.css';
-
 export default {
 	name: 'TextField',
 	props: {

src/components/fields/Toggle.vue

@@ -6,8 +6,6 @@
 </template>
 
 <script>
-import './fields.css';
-
 // Reference: https://codepen.io/finnhvman/pen/pOeyjE
 export default {
 	name: 'Toggle',

src/components/index.js

@@ -18,12 +18,12 @@ Vue.directive('frag', frag);
 import TransitionExpand from 'vue-transition-expand';
 import 'vue-transition-expand/dist/vue-transition-expand.css';
 Vue.use(TransitionExpand);
-import PerfectScrollbar from 'vue2-perfect-scrollbar';
-import 'vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css';
-Vue.use(PerfectScrollbar);
 import VueTextareaAutosize from 'vue-textarea-autosize';
 Vue.use(VueTextareaAutosize);
 import PortalVue from 'portal-vue';
 Vue.use(PortalVue);
 import Sortable from 'vue-sortable';
 Vue.use(Sortable);
+import simplebar from 'simplebar-vue';
+import 'simplebar/dist/simplebar.min.css';
+Vue.component('simplebar', simplebar);

src/components/system/Column.vue

@@ -7,8 +7,6 @@
 </template>
 
 <script>
-import '../features/table.css';
-
 export default {
      name: 'column'
 };

src/components/system/LayerTab.vue

@@ -56,7 +56,6 @@ export default {
 			if (layers[this.layer].activeSubtab?.style) {
 				style.push(layers[this.layer].activeSubtab.style);
 			}
-			style.push({ minWidth: `${layers[this.layer].minWidth}px` });
 			return style;
 		},
 		display() {
@@ -100,11 +99,13 @@ export default {
 					tab.style.flexGrow = 0;
 					tab.style.flexShrink = 0;
 					tab.style.width = "60px";
+					tab.style.minWidth = null;
 					tab.style.margin = 0;
 				} else {
 					tab.style.flexGrow = null;
 					tab.style.flexShrink = null;
 					tab.style.width = null;
+					tab.style.minWidth = `${layers[this.layer].minWidth}px`;
 					tab.style.margin = null;
 				}
 			}
@@ -120,11 +121,13 @@ export default {
 				tab.style.flexGrow = 0;
 				tab.style.flexShrink = 0;
 				tab.style.width = "60px";
+				tab.style.minWidth = null;
 				tab.style.margin = 0;
 			} else {
 				tab.style.flexGrow = null;
 				tab.style.flexShrink = null;
 				tab.style.width = null;
+				tab.style.minWidth = `${layers[this.layer].minWidth}px`;
 				tab.style.margin = null;
 			}
 		} else {

src/components/system/Modal.vue

@@ -9,13 +9,13 @@
 								default header
 							</slot>
 						</div>
-						<perfect-scrollbar class="modal-body">
+						<simplebar class="modal-body">
 							<branches>
 								<slot name="body">
 									default body
 								</slot>
 							</branches>
-						</perfect-scrollbar>
+						</simplebar>
 						<div class="modal-footer">
 							<slot name="footer">
 								<div class="modal-default-footer">
@@ -81,8 +81,11 @@ export default {
 }
 
 .modal-body {
+	display: flex;
 	margin: 20px 0;
     width: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
 }
 
 .modal-footer {
@@ -111,9 +114,3 @@ export default {
 	transform: scale(1.1);
 }
 </style>
-
-<style>
-.modal-body > .ps__rail-y {
-    z-index: 100;
-}
-</style>

src/components/system/Row.vue

@@ -7,8 +7,6 @@
 </template>
 
 <script>
-import '../features/table.css';
-
 export default {
      name: 'row'
 };

src/components/system/SavesManager.vue

@@ -33,7 +33,6 @@ import Vue from 'vue';
 import { newSave, getUniqueID, loadSave, save } from '../../util/save';
 import { player } from '../../store/proxies';
 import modInfo from '../../data/modInfo.json';
-import '../fields/fields.css';
 
 export default {
 	name: 'SavesManager',

src/components/system/TabButton.vue

@@ -9,7 +9,6 @@
 import { layers } from '../../store/layers';
 import { player } from '../../store/proxies';
 import themes from '../../data/themes';
-import '../common/notify.css';
 
 export default {
 	name: 'tab-button',

src/components/system/Tabs.vue

@@ -1,21 +1,19 @@
 <template>
-	<perfect-scrollbar class="tabs-container">
+	<simplebar class="tabs-container">
-		<div class="tabs">
+		<div v-for="(tab, index) in tabs" :key="index" class="tab" :ref="`tab-${index}`">
-			<div v-for="(tab, index) in tabs" :key="index" class="tab" :ref="`tab-${index}`">
+			<simplebar>
-				<perfect-scrollbar>
+				<div class="inner-tab">
-					<div class="inner-tab">
+					<LayerProvider :layer="tab" :index="index" v-if="tab in components && components[tab]">
-						<LayerProvider :layer="tab" :index="index" v-if="tab in components && components[tab]">
+						<component :is="components[tab]" />
-							<component :is="components[tab]" />
+					</LayerProvider>
-						</LayerProvider>
+					<layer-tab :layer="tab" :index="index" v-else-if="tab in components" :minimizable="true"
-						<layer-tab :layer="tab" :index="index" v-else-if="tab in components" :minimizable="true"
+						:tab="() => $refs[`tab-${index}`] && $refs[`tab-${index}`][0]" />
-							:tab="() => $refs[`tab-${index}`] && $refs[`tab-${index}`][0]" />
+					<component :is="tab" :index="index" v-else />
-						<component :is="tab" :index="index" v-else />
+				</div>
-					</div>
+			</simplebar>
-				</perfect-scrollbar>
+			<div class="separator" v-if="index !== tabs.length - 1"></div>
-				<div class="separator" v-if="index !== tabs.length - 1"></div>
-			</div>
 		</div>
-	</perfect-scrollbar>
+	</simplebar>
 </template>
 
 <script>
@@ -40,6 +38,8 @@ export default {
 .tabs-container {
 	width: 100vw;
     flex-grow: 1;
+    overflow-x: auto;
+    overflow-y: hidden;
 }
 
 .tabs {
@@ -54,11 +54,6 @@ export default {
     transition-duration: 0s;
 }
 
-.tab .ps {
-	height: 100%;
-	z-index: 0;
-}
-
 .inner-tab {
     padding: 50px 10px;
     min-height: calc(100% - 100px);
@@ -75,13 +70,14 @@ export default {
 	background: var(--separator);
     z-index: 1;
 }
+
+.tab > [data-simplebar] {
+    height: 100%;
+    overflow-x: hidden;
+}
 </style>
 
 <style>
-.tabs-container > .ps__rail-x {
-	z-index: 120;
-}
-
 .tab hr {
     height: 4px;
     border: none;
@@ -93,8 +89,22 @@ export default {
 	margin: 7px 0;
 }
 
-.tab > .ps > .ps__rail-y {
+.tabs-container > .simplebar-wrapper,
-    margin-right: 6px;
+.simplebar-content-wrapper,
-    z-index: 10;
+.simplebar-content {
+	min-height: 100%;
+}
+
+.tabs-container > .simplebar-wrapper > .simplebar-mask > .simplebar-offset > .simplebar-content-wrapper > .simplebar-content {
+	display: flex;
+	height: 100vh;
+}
+
+.useHeader .tabs-container > .simplebar-wrapper > .simplebar-mask > .simplebar-offset > .simplebar-content-wrapper > .simplebar-content {
+	height: calc(100vh - 50px);
+}
+
+.tab > [data-simplebar] > .simplebar-wrapper > .simplebar-mask > .simplebar-offset > .simplebar-content-wrapper {
+	position: static;
 }
 </style>

src/components/tree/Tree.vue

@@ -15,7 +15,6 @@
 
 <script>
 import { layers } from '../../store/layers';
-import '../features/table.css';
 
 export default {
 	name: 'tree',