Cap image max-width in CommitHistory and Steam for responsive layout
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 18s
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 18s
Prevents avatar and game images from stretching too wide when sidebars expand to 95vw at the 1360px breakpoint. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -18,7 +18,7 @@ const { gitFeed: feed, loaded } = storeToRefs(homeData);
|
|||||||
|
|
||||||
<div
|
<div
|
||||||
v-else-if="feed"
|
v-else-if="feed"
|
||||||
class="flex-1 flex flex-col overflow-y-auto overflow-x-hidden"
|
class="flex-1 flex flex-col items-center overflow-y-auto overflow-x-hidden"
|
||||||
>
|
>
|
||||||
<h3>Last git activity</h3>
|
<h3>Last git activity</h3>
|
||||||
<img :src="feed.avatarUrl" alt="User avatar" class="avatar" loading="lazy" />
|
<img :src="feed.avatarUrl" alt="User avatar" class="avatar" loading="lazy" />
|
||||||
@@ -35,3 +35,11 @@ const { gitFeed: feed, loaded } = storeToRefs(homeData);
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.avatar {
|
||||||
|
max-width: 200px;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -99,6 +99,8 @@ function formatHours(minutes) {
|
|||||||
|
|
||||||
.game-img {
|
.game-img {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
|
max-width: 300px;
|
||||||
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
|
|||||||
Reference in New Issue
Block a user