feat(package): add scroll on lit migrated pannels (#604)

Author: clemgbld

public/common/scrollbar-style.js

@@ -0,0 +1,44 @@
+// Import Third-party Dependencies
+import { css } from "lit";
+
+export const scrollbarStyle = css`
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-track-piece {
+  /* Fond */
+  background: transparent none;
+  border: solid 4px transparent;
+  border-right-width: 6px;
+  margin: 4px;
+}
+
+::-webkit-scrollbar-track-piece:horizontal {
+  /* Fond pour la barre du bas */
+  border-right-width: 4px;
+  border-bottom-width: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+  /* Barre */
+  border: solid 0 transparent;
+  border-right-width: 4px;
+  border-radius: 5px;
+  border-top-right-radius: 9px 5px;
+  border-bottom-right-radius: 9px 5px;
+  box-shadow: inset 0 0 0 1px #3722AF,
+    inset 0 0 0 6px #3f27c7;
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+  /* Barre du bas */
+  border-right-width: 0;
+  border-bottom-width: 4px;
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px 9px;
+  border-bottom-left-radius: 5px 9px;
+}
+`;

public/components/package/pannels/files/files.js

@@ -6,11 +6,15 @@ import { when } from "lit/directives/when.js";
 import { currentLang } from "../../../../common/utils.js";
 import "../../../bundlephobia/bundlephobia.js";
 import "../../../items-list/items-list.js";
+import { scrollbarStyle } from "../../../../common/scrollbar-style.js";
 
 class Files extends LitElement {
-  static styles = css`
+  static styles = [scrollbarStyle, css`
   :host{
   display: block;
+  overflow: hidden auto;
+  height: calc(100vh - 315px);
+  box-sizing: border-box;
   }
 
  .head-title {
@@ -39,7 +43,7 @@ class Files extends LitElement {
   letter-spacing: 1px;
   padding: 0 10px;
 }
-`;
+`];
   static properties = {
     package: { type: Object }
   };

public/components/package/pannels/licenses/licenses.js

@@ -7,9 +7,17 @@ import { selectLicenses } from "./view-model.js";
 import { currentLang } from "../../../../common/utils.js";
 import "../../../file-box/file-box.js";
 import "../../../icon/icon.js";
+import { scrollbarStyle } from "../../../../common/scrollbar-style.js";
 
 class Licenses extends LitElement {
-  static styles = css`
+  static styles = [scrollbarStyle, css`
+  :host {
+  display: block;
+  overflow: hidden auto;
+  height: calc(100vh - 315px);
+  box-sizing: border-box;
+  }
+
   .box-container-licenses {
    display: flex;
     flex-wrap: wrap;
@@ -68,7 +76,7 @@ class Licenses extends LitElement {
     text-decoration: underline;
     font-weight: bold;
   }
-`;
+`];
 
   static properties = {
     package: { type: Object }

public/components/package/pannels/scripts/scripts.js

@@ -9,6 +9,7 @@ import * as utils from "../../../../common/utils.js";
 import "../../../expandable/expandable.js";
 import "../../../items-list/items-list.js";
 import "../../../icon/icon.js";
+import { scrollbarStyle } from "../../../../common/scrollbar-style.js";
 
 // CONSTANTS
 const kUnsafeNpmScripts = new Set([
@@ -20,7 +21,15 @@ const kUnsafeNpmScripts = new Set([
 ]);
 
 class Scripts extends LitElement {
-  static styles = css`
+  static styles = [
+    scrollbarStyle,
+    css`
+ :host {
+  display: block;
+  overflow: hidden auto;
+  height: calc(100vh - 315px);
+  box-sizing: border-box;
+  }
 .package-scripts {
   display: flex;
   flex-direction: column;
@@ -127,7 +136,7 @@ class Scripts extends LitElement {
 #show-hide-dependency nsecure-icon {
   transform: translateY(2px);
 }
-`;
+`];
 
   static properties = {
     package: { type: Object },

public/components/package/pannels/vulnerabilities/vulnerabilities.js

@@ -6,9 +6,17 @@ import { repeat } from "lit/directives/repeat.js";
 // Import Internal Dependencies
 import { EVENTS } from "../../../../core/events.js";
 import "../../../icon/icon.js";
+import { scrollbarStyle } from "../../../../common/scrollbar-style.js";
 
 class Vulnerabilities extends LitElement {
-  static styles = css`
+  static styles = [scrollbarStyle, css`
+:host {
+  display: block;
+  overflow: hidden auto;
+  height: calc(100vh - 315px);
+  box-sizing: border-box;
+  }
+
 p {
   margin: 0;
 }
@@ -218,7 +226,7 @@ p {
 .packages-vuln .vuln>div .severity.low {
   background: #2545f9;
 }
-`;
+`];
 
   static properties = {
     package: { type: Object },