From 6fb11e864cd566cd44342baed1d7291414864328 Mon Sep 17 00:00:00 2001
From: Tsukina-7mochi <Tsukina7mochi@gmail.com>
Date: Tue, 11 Jun 2024 18:07:23 +0900
Subject: [PATCH 1/3] fix: set overflow-wrap for long description

---
 src/repositoryCardDisplay.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/repositoryCardDisplay.ts b/src/repositoryCardDisplay.ts
index 3edafc9..3339bfd 100644
--- a/src/repositoryCardDisplay.ts
+++ b/src/repositoryCardDisplay.ts
@@ -86,6 +86,7 @@ export class RepositoryCardDisplay extends LitElement {
 
     #description {
       margin: 0;
+      overflow-wrap: anywhere;
     }
 
     #source {

From fa6bbb0447334f61ad8d86aabd0fbb4cd79a945d Mon Sep 17 00:00:00 2001
From: Tsukina-7mochi <Tsukina7mochi@gmail.com>
Date: Tue, 11 Jun 2024 18:12:05 +0900
Subject: [PATCH 2/3] fix: replace ids into classes

---
 src/repositoryCardDisplay.ts | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/repositoryCardDisplay.ts b/src/repositoryCardDisplay.ts
index 3339bfd..b792bce 100644
--- a/src/repositoryCardDisplay.ts
+++ b/src/repositoryCardDisplay.ts
@@ -50,7 +50,7 @@ export class RepositoryCardDisplay extends LitElement {
       color: #646cff;
     }
 
-    a#wrapper {
+    a.wrapper {
       display: flex;
       flex-direction: column;
       gap: 0.35em;
@@ -79,22 +79,22 @@ export class RepositoryCardDisplay extends LitElement {
       gap: 1em;
     }
 
-    #avatar {
+    img.avatar {
       height: 3.5em;
       border-radius: 4px;
     }
 
-    #description {
+    p.description {
       margin: 0;
       overflow-wrap: anywhere;
     }
 
-    #source {
+    div.source {
       font-size: 0.9em;
       color: var(--c-fg-2);
     }
 
-    #topics > span {
+    div.topics > span {
       margin-right: 0.5em;
     }
   `;
@@ -142,18 +142,18 @@ export class RepositoryCardDisplay extends LitElement {
 
   render() {
     const avatar = this.avatarUrl !== null
-      ? html`<img id="avatar" src="${this.avatarUrl}" alt="${this.owner}">`
+      ? html`<img class="avatar" src="${this.avatarUrl}" alt="${this.owner}">`
       : nothing;
     const forkSource = this.forkSource !== null
-      ? html`<div id="source">fork from <a href="${this.forkSource.html_url}">${this.forkSource.full_name}</a></div>`
+      ? html`<div class="source">fork from <a href="${this.forkSource.html_url}">${this.forkSource.full_name}</a></div>`
       : nothing;
-    const description = this.description !== null ? html`<p id="description">${this.description}</p>` : nothing;
+    const description = this.description !== null ? html`<p class="description">${this.description}</p>` : nothing;
     const language = this.language !== null
-      ? html`<div id="language">${languageColorElement(this.language)} ${this.language}</div>`
+      ? html`<div class="language">${languageColorElement(this.language)} ${this.language}</div>`
       : nothing;
-    const stars = this.stars !== null ? html`<div id="stars">${starIcon} ${this.stars}</div>` : nothing;
-    const forks = this.forks !== null ? html`<div id="forks">${forkIcon} ${this.forks}</div>` : nothing;
-    const license = this.license !== null ? html`<div id="license">${licenseIcon} ${this.license}</div>` : nothing;
+    const stars = this.stars !== null ? html`<div class="stars">${starIcon} ${this.stars}</div>` : nothing;
+    const forks = this.forks !== null ? html`<div class="forks">${forkIcon} ${this.forks}</div>` : nothing;
+    const license = this.license !== null ? html`<div class="license">${licenseIcon} ${this.license}</div>` : nothing;
     const topicSpans = html`${map(this.topics, (topic) => html`<span>${topic}</span>`)}`;
     const topicIcon = this.topics.length > 0 ? tagIcon : nothing;
 
@@ -161,7 +161,7 @@ export class RepositoryCardDisplay extends LitElement {
 
     return html`
       <gh-card-base intractable>
-        <a id="wrapper" href="${this.url}">
+        <a class="wrapper" href="${this.url}">
           <header>
             ${avatar}
             <div>
@@ -176,7 +176,7 @@ export class RepositoryCardDisplay extends LitElement {
             ${forks}
             ${license}
           </div>
-          <div id="topics">
+          <div class="topics">
             ${topicIcon}
             ${topicSpans}
           </div>

From 6ea67c0164b4ae7c05fa34809bab4705aa6fd77a Mon Sep 17 00:00:00 2001
From: Tsukina-7mochi <Tsukina7mochi@gmail.com>
Date: Tue, 11 Jun 2024 18:30:58 +0900
Subject: [PATCH 3/3] fix: add overflow: hidden for wrapper

---
 src/repositoryCardDisplay.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/repositoryCardDisplay.ts b/src/repositoryCardDisplay.ts
index b792bce..0881538 100644
--- a/src/repositoryCardDisplay.ts
+++ b/src/repositoryCardDisplay.ts
@@ -59,6 +59,7 @@ export class RepositoryCardDisplay extends LitElement {
       color: var(--c-fg);
       line-height: 1.5;
       text-indent: 0;
+      overflow: hidden;
     }
 
     h2 {