Merge pull request #148 from JustinWesleyFerrari/justin/master

Fixed gif collection wrapper overflow issue

qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifs-css.js

@@ -137,7 +137,7 @@ display: flex;
 		flex-direction: column;
 		width: 100%;
 		height: 100%;
-overflow: hidden;
+		overflow-x: hidden;
 	}
 
 	.collection-gifs {
@@ -175,7 +175,8 @@ height: 150px;
 		object-fit: cover;
 		border: 1px solid transparent;
 		transition: all 0.2s cubic-bezier(0, 0.55, 0.45, 1);
-box-shadow: rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px;
+		box-shadow: rgb(50 50 93 / 25%) 0px 6px 12px -2px,
+			rgb(0 0 0 / 30%) 0px 3px 7px -3px;
 	}
 
 	.collection-gif:hover {
@@ -354,7 +355,8 @@ color: var(--chat-bubble-msg-color);
 	.collection-back-button:hover {
 		border: none;
 		box-sizing: border-box;
-  box-shadow: rgb(0 0 0 / 14%) 0px 4px 5px 0px, rgb(0 0 0 / 12%) 0px 1px 10px 0px, rgb(0 0 0 / 20%) 0px 2px 4px -1px;
+		box-shadow: rgb(0 0 0 / 14%) 0px 4px 5px 0px,
+			rgb(0 0 0 / 12%) 0px 1px 10px 0px, rgb(0 0 0 / 20%) 0px 2px 4px -1px;
 	}
 
 	.collection-back-button-arrow {
@@ -444,7 +446,8 @@ background-color: #03a8f475;
 	}
 
 	@keyframes lds-circle {
-  0%, 100% {
+		0%,
+		100% {
 			animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
 		}
 		0% {
@@ -487,7 +490,9 @@ background-color: #03a8f475;
 
 	.subscribe-button:hover {
 		cursor: pointer;
-  box-shadow:		0px 3px 4px 0px hsla(0,0%,0%,0.14), 0px 3px 3px -2px hsla(0,0%,0%,0.12), 0px 1px 8px 0px hsla(0,0%,0%,0.2);
+		box-shadow: 0px 3px 4px 0px hsla(0, 0%, 0%, 0.14),
+			0px 3px 3px -2px hsla(0, 0%, 0%, 0.12),
+			0px 1px 8px 0px hsla(0, 0%, 0%, 0.2);
 	}
 
 	.unsubscribe-button {
@@ -509,7 +514,8 @@ background-color: #03a8f475;
 
 	.unsubscribe-button:hover {
 		cursor: pointer;
-  box-shadow:		0px 3px 4px 0px hsla(0,0%,0%,0.14), 0px 3px 3px -2px hsla(0,0%,0%,0.12), 0px 1px 8px 0px hsla(0,0%,0%,0.2);
+		box-shadow: 0px 3px 4px 0px hsla(0, 0%, 0%, 0.14),
+			0px 3px 3px -2px hsla(0, 0%, 0%, 0.12),
+			0px 1px 8px 0px hsla(0, 0%, 0%, 0.2);
 	}
-
 `;

qortal-ui-plugins/plugins/core/components/ChatGifs/ChatGifsExplore-css.js

@@ -14,7 +14,26 @@ display: flex;
 		flex-direction: column;
 		width: 100%;
 		height: 100%;
-overflow: hidden;
+		max-height: 500px;
+		overflow-y: auto;
+		overflow-x: hidden;
+	}
+
+	.collection-wrapper::-webkit-scrollbar-track {
+		background-color: whitesmoke;
+		border-radius: 7px;
+	}
+
+	.collection-wrapper::-webkit-scrollbar {
+		width: 6px;
+		border-radius: 7px;
+		background-color: whitesmoke;
+	}
+
+	.collection-wrapper::-webkit-scrollbar-thumb {
+		background-color: rgb(180, 176, 176);
+		border-radius: 7px;
+		transition: all 0.3s ease-in-out;
 	}
 
 	.collection-card {
@@ -90,7 +109,7 @@ transition: all 0.3s ease-in-out;
 
 	.clear-search-icon:hover {
 		cursor: pointer;
-background-color: #e4e3e389
+		background-color: #e4e3e389;
 	}
 
 	.gifs-loading-message {
@@ -120,7 +139,8 @@ animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
 	}
 
 	@keyframes lds-circle {
-0%, 100% {
+		0%,
+		100% {
 			animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
 		}
 		0% {
@@ -134,4 +154,4 @@ animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
 			transform: rotateY(3600deg);
 		}
 	}
-`
+`;