allow scrolling from body again, keep scrollbar in widgets

packages/client/src/init.ts

@@ -219,7 +219,6 @@ import { getAccountFromId } from "@/scripts/get-account-from-id";
 
 		const rootEl = document.createElement("div");
 		rootEl.id = MISSKEY_MOUNT_DIV_ID;
-		rootEl.style.height = "100%";
 		document.body.appendChild(rootEl);
 		return rootEl;
 	})();

packages/client/src/style.scss

@@ -73,7 +73,6 @@ html {
 body::-webkit-scrollbar {
 	width: 12px;
 	height: 12px;
-
 }
 body::-webkit-scrollbar-thumb {
 	border-radius: 100px;
@@ -111,7 +110,6 @@ html._themeChanging_ {
 html, body {
 	margin: 0;
 	padding: 0;
-	height: 100%;
 }
 
 .swiper-slide {

packages/client/src/ui/universal.vue

@@ -19,7 +19,7 @@
 			</main>
 		</MkStickyContainer>
 
-		<div v-if="isDesktop" ref="widgetsEl" class="widgets">
+		<div v-if="isDesktop" ref="widgetsEl" class="widgets-container">
 			<XWidgets />
 		</div>
 
@@ -523,7 +523,7 @@ console.log(mainRouter.currentRoute.value.name);
 			width: 750px;
 			background: var(--panel);
 			border-radius: 0;
-			overflow: auto;
+			overflow: clip;
 			--margin: 12px;
 			background: var(--bg);
 		}
@@ -543,19 +543,21 @@ console.log(mainRouter.currentRoute.value.name);
 	> .contents {
 		width: 100%;
 		min-width: 0;
-		overflow: auto;
 		$widgets-hide-threshold: 1090px;
 		@media (max-width: $widgets-hide-threshold) {
 			padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
 		}
 	}
 
-	> .widgets {
-		padding: 0 var(--margin);
-		width: 300px;
+	> .widgets-container {
+		margin-right: calc(var(--margin) / 2);
+		width: calc(300px + (var(--margin) * 1.5));
 		flex: 0 0 auto;
 		box-sizing: content-box;
-		overflow: auto;
+		> :deep(.widgets) {
+			padding-left: var(--margin);
+			padding-right: calc(var(--margin) / 2);
+		}
 
 		@media (max-width: $widgets-hide-threshold) {
 			display: none;

packages/client/src/ui/universal.widgets.vue

@@ -1,5 +1,5 @@
 <template>
-	<aside class="efzpzdvf" :aria-label="i18n.ts._deck._columns.widgets">
+	<aside class="widgets" :aria-label="i18n.ts._deck._columns.widgets">
 		<MkAd class="a" :prefer="['widget']" />
 		<XWidgets
 			:edit="editMode"
@@ -83,20 +83,24 @@ function updateWidgets(widgets) {
 </script>
 
 <style lang="scss" scoped>
-.efzpzdvf {
+.widgets {
 	position: sticky;
+	top: var(--stickyTop, 0px);
 	height: min-content;
 	min-height: 100vh;
-	padding: var(--margin) 0;
-	box-sizing: border-box;
+	max-height: 100vh;
+	box-sizing: content-box;
+	overflow: hidden auto;
+	&:not(:hover):not(:focus-within)::-webkit-scrollbar {
+		width: 0;
+	}
 
 	> * {
 		margin: var(--margin) 0;
 		width: 300px;
-
-		&:first-child {
-			margin-top: 0;
 	}
+	> :first-child {
+		margin-top: calc(var(--margin) * 2);
 	}
 
 	> .add {