.header { padding: 16px; border-bottom: 1px solid var(--color-border-primary); } .titleWithMenu { display: flex; align-items: start; gap: 10px; } .titleWrapper { flex-grow: 1; min-width: 0; } .tag { margin-bottom: 4px; margin-inline-start: -8px; } .name { font-size: 28px; line-height: 1.2; overflow-wrap: anywhere; } .description { font-size: 15px; margin-top: 8px; } .headerButtonWrapper { display: flex; gap: 8px; } .iconButton { box-sizing: content-box; padding: 5px; border-radius: 4px; border: 1px solid var(--color-border-primary); } .authorNote { margin-top: 8px; font-size: 13px; color: var(--color-text-secondary); } .previewAuthorNote { font-size: 13px; } .metaList { --gap: 0.75ch; display: flex; flex-wrap: wrap; margin-top: 16px; gap: var(--gap); font-size: 15px; & > li:not(:last-child)::after { content: 'ยท'; margin-inline-start: var(--gap); } } .columnSubheading { background: var(--color-bg-secondary); padding: 15px 20px; font-size: 15px; font-weight: 500; &:focus-visible { outline: var(--outline-focus-default); outline-offset: -2px; } } .displayNameWithAvatar { display: inline-flex; gap: 4px; align-items: baseline; a { color: inherit; text-decoration: underline; &:hover, &:focus { text-decoration: none; } } > :global(.account__avatar) { align-self: center; } } .sensitiveWarning { display: flex; flex-direction: column; align-items: center; max-width: 460px; margin: auto; padding: 60px 30px; gap: 20px; text-align: center; text-wrap: balance; font-size: 15px; line-height: 1.5; cursor: default; } .revokeControlWrapper { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: -10px; padding-bottom: 16px; padding-inline: calc(26px + var(--avatar-width)) 16px; :global(.button) { min-width: 30%; white-space: normal; } --avatar-width: 46px; @container (width < 360px) { --avatar-width: 35px; } }