forked from
joebasser.com/atmosphere-account
this repo has no description
fix(profile): keep what's new preview visible
Move the latest update preview outside the closed details element so the short excerpt is visible before expanding the full update.
Made-with: Cursor
+11
-13
+5
-9
assets/styles.css
+5
-9
assets/styles.css
···
5073
5073
display: flex;
5074
5074
flex-direction: column;
5075
5075
}
5076
-
.profile-whats-new-expand[open] .profile-whats-new-preview {
5076
+
.profile-whats-new-expand:has(.profile-whats-new-details[open])
5077
+
.profile-whats-new-preview {
5077
5078
display: none;
5078
5079
}
5079
-
.profile-whats-new-expand summary {
5080
-
order: 2;
5080
+
.profile-whats-new-details summary {
5081
5081
align-self: flex-start;
5082
5082
margin-top: 0.55rem;
5083
5083
list-style: none;
···
5086
5086
font-weight: 750;
5087
5087
cursor: pointer;
5088
5088
}
5089
-
.profile-whats-new-expand summary::-webkit-details-marker {
5089
+
.profile-whats-new-details summary::-webkit-details-marker {
5090
5090
display: none;
5091
5091
}
5092
5092
.profile-whats-new-preview {
5093
5093
display: -webkit-box;
5094
5094
overflow: hidden;
5095
-
order: 1;
5096
5095
-webkit-box-orient: vertical;
5097
5096
-webkit-line-clamp: 2;
5098
5097
white-space: normal;
5099
-
}
5100
-
.profile-whats-new-full {
5101
-
order: 3;
5102
5098
}
5103
5099
.profile-whats-new-empty {
5104
5100
color: rgba(18, 26, 47, 0.62);
···
5479
5475
background: rgba(255, 255, 255, 0.12);
5480
5476
color: rgba(255, 255, 255, 0.72);
5481
5477
}
5482
-
.dark-phase .profile-whats-new-expand summary,
5478
+
.dark-phase .profile-whats-new-details summary,
5483
5479
.dark-phase .profile-whats-new-icon-button,
5484
5480
.dark-phase .profile-whats-new-history-button,
5485
5481
.dark-phase .profile-version-history-commit {
+6
-4
components/explore/ProfileWhatsNew.tsx
+6
-4
components/explore/ProfileWhatsNew.tsx
···
90
90
<h3 class="profile-whats-new-title">{latest.title}</h3>
91
91
{isLongBody(latest.body)
92
92
? (
93
-
<details class="profile-whats-new-expand">
93
+
<div class="profile-whats-new-expand">
94
94
<p class="profile-whats-new-preview">
95
95
{previewBody(latest.body)}
96
96
</p>
97
-
<summary>{copy.readFullUpdate}</summary>
98
-
<p class="profile-whats-new-full">{latest.body}</p>
99
-
</details>
97
+
<details class="profile-whats-new-details">
98
+
<summary>{copy.readFullUpdate}</summary>
99
+
<p class="profile-whats-new-full">{latest.body}</p>
100
+
</details>
101
+
</div>
100
102
)
101
103
: <p class="profile-whats-new-body">{latest.body}</p>}
102
104
</div>