fix(discord-invite): improve styling (#441)

Changed some styles because it made the invitation a single size and breaking the responsiveness and updated the information of the invitation because they were not changing the direction and added some "text-overflow"

Author: eumarciel404

packages/core/src/components/discord-invite/DiscordInvite.ts

@@ -20,7 +20,12 @@ export class DiscordInvite extends LitElement implements LightTheme {
 			background-color: #2f3136;
 			border-radius: 4px;
 			padding: 16px;
-			width: 432px;
+			max-width: 432px;
+			min-width: 160px;
+			width: 100%;
+			box-sizing: border-box;
+			display: flex;
+			flex-direction: column;
 		}
 
 		:host([light-theme]) {
@@ -45,7 +50,8 @@ export class DiscordInvite extends LitElement implements LightTheme {
 
 		:host .discord-invite-root {
 			display: flex;
-			flex-flow: row nowrap;
+			flex-flow: row wrap;
+			gap: 16px;
 		}
 
 		:host .discord-invite-icon {
@@ -66,11 +72,15 @@ export class DiscordInvite extends LitElement implements LightTheme {
 		:host .discord-invite-info {
 			font-family: 'gg sans', 'Noto Sans', WhitneyMedium, Whitney, 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
 			display: flex;
-			flex: 1 1 auto;
-			flex-direction: column;
-			flex-wrap: nowrap;
-			align-items: stretch;
-			justify-content: center;
+			flex: 1000 0 auto;
+			align-items: center;
+			max-width: 100%;
+			display: flex;
+		}
+
+		.discord-invite-info-text-ellipsis {
+			overflow: hidden;
+			text-overflow: ellipsis;
 		}
 
 		:host .discord-invite-title {
@@ -100,15 +110,22 @@ export class DiscordInvite extends LitElement implements LightTheme {
 		:host .discord-invite-counts {
 			display: flex;
 			align-items: center;
+			flex-wrap: wrap;
 			font-size: 14px;
 			font-weight: 600;
-			white-space: nowrap;
 			text-overflow: ellipsis;
 			overflow: hidden;
 			color: #b9bbbe;
 			line-height: 16px;
 		}
 
+		:host .discord-invite-counts-info {
+			text-overflow: ellipsis;
+			overflow: hidden;
+			display: flex;
+			align-items: center;
+		}
+
 		:host .discord-invite-status {
 			display: block;
 			margin-right: 4px;
@@ -140,7 +157,6 @@ export class DiscordInvite extends LitElement implements LightTheme {
 			height: 40px;
 			padding: 0 20px;
 			align-self: center;
-			margin-left: 10px;
 			-webkit-box-flex: 0;
 			-ms-flex: 0 0 auto;
 			flex: 0 0 auto;
@@ -153,6 +169,8 @@ export class DiscordInvite extends LitElement implements LightTheme {
 			-webkit-transition: background-color 0.17s ease;
 			transition: background-color 0.17s ease;
 			text-decoration: none;
+			box-sizing: border-box;
+			flex: 1 0 auto;
 		}
 
 		:host .discord-invite-join:hover {
@@ -270,29 +288,35 @@ export class DiscordInvite extends LitElement implements LightTheme {
 	protected override render() {
 		return html`<div class="discord-invite-header">${this.inviteTitle}</div>
 			<div class="discord-invite-root">
-				<img class="discord-invite-icon" src=${ifDefined(this.icon)} alt=${ifDefined(this.name)} />
 				<div class="discord-invite-info">
-					<div class="discord-invite-title">
-						${when(
-							(this.verified && !this.partnered) || (!this.verified && this.partnered),
-							() =>
-								html`<div class="discord-invite-badge">
-									${GuildBadge({
-										'aria-label': this.partnered ? 'Discord Partner' : 'Verified',
-										class: `discord-invite-badge-${this.partnered ? 'partnered' : 'verified'}`
-									})}
-									<div class="discord-invite-badge-container">
-										${this.partnered ? PartnerBadgeOverlay() : VerifiedBadgeOverlay()}
-									</div>
-								</div>`
-						)}
-						<span class="discord-invite-name">${this.name}</span>
-					</div>
-					<div class="discord-invite-counts">
-						<i class="discord-invite-status discord-invite-status-online"></i>
-						<span class="discord-invite-count">${this.online.toLocaleString()} Online</span>
-						<i class="discord-invite-status"></i>
-						<span class="discord-invite-count">${this.members.toLocaleString()} Members</span>
+					<img class="discord-invite-icon" src=${ifDefined(this.icon)} alt=${ifDefined(this.name)} />
+					<div class="discord-invite-info-text-ellipsis">
+						<div class="discord-invite-title">
+							${when(
+								(this.verified && !this.partnered) || (!this.verified && this.partnered),
+								() =>
+									html`<div class="discord-invite-badge">
+										${GuildBadge({
+											'aria-label': this.partnered ? 'Discord Partner' : 'Verified',
+											class: `discord-invite-badge-${this.partnered ? 'partnered' : 'verified'}`
+										})}
+										<div class="discord-invite-badge-container">
+											${this.partnered ? PartnerBadgeOverlay() : VerifiedBadgeOverlay()}
+										</div>
+									</div>`
+							)}
+							<span class="discord-invite-name">${this.name}</span>
+						</div>
+						<div class="discord-invite-counts">
+							<div class="discord-invite-counts-info">
+								<i class="discord-invite-status discord-invite-status-online"></i>
+								<span class="discord-invite-count">${this.online.toLocaleString()} Online</span>
+							</div>
+							<div class="discord-invite-counts-info">
+								<i class="discord-invite-status"></i>
+								<span class="discord-invite-count">${this.members.toLocaleString()} Members</span>
+							</div>
+						</div>
 					</div>
 				</div>
 				<a class="discord-invite-join" href=${ifDefined(this.url)} target="_blank" rel="noopener noreferrer">${this.joinBtn}</a>