fix: enhance styling for cloud related elements

Author: imantsk

src/css/edit/_gpt.scss

@@ -20,30 +20,66 @@
 .generate-button {
 	display: flex;
 	align-items: center;
+	gap: 5px;
 
 	.dashicons-warning {
 		color: #b32d2e;
 	}
+
+	.snippet-tags-container &,
+	.snippet-description-container & {
+		float: inline-end;
+	}
 }
 
 .code-line-explanation {
 	display: flex;
-	align-items: center;
-	font-size: 13px;
+	cursor: default;
+	font-size: inherit;
 	margin: 0;
-	padding-block: 0;
-	padding-inline: 8px;
-	background-color: #fff;
-	border: 1px solid #bbb;
-	border-inline-start: 0;
-	border-inline-end: 0;
+	padding-inline: 6px;
+	border-inline-start: none;
+	border-inline-end: none;
+	border-block-start: 1px solid rgb(0 0 0 / 15%);
+	border-block-end: 1px solid rgb(0 0 0 / 15%);
+	border-image-slice: 1;
+	border-image-width: 1;
+	border-image-repeat: stretch;
 	color: #666;
 	font-style: italic;
-	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+	font-family: monospace;
+	gap: 5px;
+	align-items: center;
 
 	img {
 		block-size: 1rem;
-		padding-inline-end: 5px;
+		opacity: 0.7;
+	}
+
+	.code-line-actions {
+		cursor: default;
+		gap: 7px;
+		display: inline-flex;
+		margin-inline-start: 5px;
+		font-family: system-ui;
+		font-style: normal;
+
+		.commit {
+			color: #3d9970;
+		}
+
+		.remove {
+			color: #b32d2e;
+		}
+
+		.action {
+			cursor: pointer;
+			opacity: 0.6;
+
+			&:hover {
+				opacity: 1;
+			}
+		}
 	}
 }
 

src/css/manage/_cloud.scss

@@ -69,13 +69,6 @@ td.column-name {
 	}
 }
 
-td.column-download {
-	display: flex;
-	gap: 0.5em;
-	flex-flow: column;
-	text-align: center;
-}
-
 .cloud-snippet-download {
 	color: theme.$accent !important;
 }
@@ -218,12 +211,72 @@ td.column-download {
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: center;
+
+	.plugin-card {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+
+		.cloud-meta-row {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			flex-grow: 1;
+		}
+
+		.column-name {
+			display: flex;
+
+			h3 {
+				display: inline-flex;
+				flex-shrink: 1;
+			}
+
+			.title-icon {
+				block-size: 90px;
+				margin-block-start: -7px;
+			}
+		}
+
+		.column-votes {
+			display: inline-flex;
+			gap: 3px;
+
+			&:hover {
+				.thumbs-up {
+					stroke: #059669;
+					fill: #6ee7b7;
+					animation: thumb 1s ease-in-out infinite;
+				}
+			}
+
+			.num-votes {
+				display: inline-flex;
+				align-items: flex-end;
+			}
+		}
+	}
+
+	.action-buttons {
+		margin: 0;
+
+		.button {
+			inline-size: 100%;
+			text-align: center;
+		}
+	}
 }
 
-.cloud-snippets .plugin-card {
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
+.cloud-snippets #the-list{
+  .column-download {
+    display: flex;
+    flex-flow: column;
+    text-align: right;
+    
+    li {
+      list-style: none;
+    }
+  }
 }
 
 .cloud-connect-wrap {
@@ -237,6 +290,7 @@ td.column-download {
 	gap: 5px;
 }
 
+
 .cloud-table > tbody > tr {
 	block-size: 80px;
 	box-shadow: inset 0 -1px 0 rgb(0 0 0 / 10%);
@@ -264,6 +318,7 @@ td.column-download {
 	background-color: #ce0000;
 	border-radius: 50%;
 
+
 	.cloud-connect-active & {
 		background-color: #25a349;
 	}
@@ -282,33 +337,16 @@ td.column-download {
 	block-size: 1.25rem; /* 20px */
 	transform-origin: bottom left;
 
-	[dir="rtl"] & {
-		transform-origin: bottom right;
-	}
-
 	&:hover {
 		stroke: #059669;
 		fill: #6ee7b7;
 	}
 }
 
-.voted-info {
-	display: inline-flex;
-	gap: 3px;
-	align-items: center;
-	margin-block-end: 6px !important;
-
-	&:hover {
-		.thumbs-up {
-			stroke: #059669;
-			fill: #6ee7b7;
-			animation: thumb 1s ease-in-out infinite;
-		}
-	}
-}
-
 .plugin-card-bottom {
 	overflow: visible !important;
+	display: flex;
+	align-items: center;
 }
 
 .beta-test-notice {
@@ -327,15 +365,15 @@ td.column-download {
 	}
 
 	33% {
-		transform: rotate(calc(7deg * var(--cs-direction-multiplier)));
+		transform: rotate(7deg)
 	}
 
 	66% {
-		transform: rotate(calc(-15deg * var(--cs-direction-multiplier)));
+		transform: rotate(-15deg)
 	}
 
 	90% {
-		transform: rotate(calc(5deg * var(--cs-direction-multiplier)));
+		transform: rotate(5deg)
 	}
 
 	100% {