maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Avoid layout funkiness when non-breaking characters are used (#16782)

Browse source 
* Apply overflow-wrap fallback everywhere we use anywhere value

* fix some more non breaking spaces layout issues

* user with org sidebar

* comment index header
This commit is contained in:
Suzanne Aitchison 2022-03-08 10:37:52 +00:00 • committed by GitHub
parent bec3cc144d
commit 18877f6f1b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 38 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/assets/stylesheets/base/main.scss
View file

@ -77,6 +77,9 @@ a {
letter-spacing: -0.02em;
line-height: 1;
outline: 0;
// overflow-wrap: anywhere isn't supported in Safari, in which case this fallback applies
overflow-wrap: break-word;
overflow-wrap: anywhere;
&__img,

3
app/assets/stylesheets/components/cards.scss
View file

@ -54,6 +54,9 @@
border-radius: var(--radius-auto);
background: var(--card-bg);
box-shadow: 0 0 0 1px var(--card-border);
// overflow-wrap: anywhere isn't supported in Safari, in which case this fallback applies
overflow-wrap: break-word;
overflow-wrap: anywhere;
&__revealable {

1
app/assets/stylesheets/components/links.scss
View file

@ -13,6 +13,7 @@
outline: 0;
text-decoration: none;
color: var(--color);
max-width: 100%;
&--block {
display: flex;

3
app/assets/stylesheets/components/profile-preview-card.scss
View file

@ -10,6 +10,9 @@
left: 0;
font-size: var(--fs-base);
font-weight: var(--fw-normal);
// overflow-wrap: anywhere isn't supported in Safari, in which case this fallback applies
overflow-wrap: break-word;
overflow-wrap: anywhere;
}

5
app/assets/stylesheets/components/stories.scss
View file

@ -152,6 +152,9 @@
color: var(--card-color);
line-height: var(--lh-tight);
font-size: var(--title-font-size);
// overflow-wrap: anywhere isn't supported in Safari, in which case this fallback applies
overflow-wrap: break-word;
overflow-wrap: anywhere;
word-break: break-word;
margin-bottom: var(--su-1);
@ -238,6 +241,8 @@
color: black;
background: yellow;
}
// overflow-wrap: anywhere isn't supported in Safari, in which case this fallback applies
overflow-wrap: break-word;
overflow-wrap: anywhere;
word-break: break-word;
}

3
app/assets/stylesheets/preact/onboarding-modal.scss
View file

@ -460,6 +460,9 @@ $onboarding-user-selected-hover: rgba(71, 85, 235, 0.2);
.user-summary {
margin: 0;
line-height: var(--lh-tight);
// overflow-wrap: anywhere isn't supported in Safari, in which case this fallback applies
overflow-wrap: break-word;
overflow-wrap: anywhere;
}

2
app/assets/stylesheets/views/article.scss
View file

@ -41,6 +41,8 @@
}
&__header {
// overflow-wrap: anywhere isn't supported in Safari, in which case this fallback applies
overflow-wrap: break-word;
overflow-wrap: anywhere;
word-break: break-word;

3
app/assets/stylesheets/views/dashboard.scss
View file

@ -24,6 +24,9 @@
&__title {
grid-column-end: span 2;
// overflow-wrap: anywhere isn't supported in Safari, in which case this fallback applies
overflow-wrap: break-word;
overflow-wrap: anywhere;
word-break: break-word;
@media (min-width: $breakpoint-m) {

3
app/assets/stylesheets/views/listings.scss
View file

@ -14,6 +14,9 @@
.single-listing {
$el: &;
// overflow-wrap: anywhere isn't supported in Safari, in which case this fallback applies
overflow-wrap: break-word;
overflow-wrap: anywhere;
word-break: break-word;
overflow: hidden;

4
app/assets/stylesheets/views/signin.scss
View file

@ -51,6 +51,10 @@
font-size: var(--fs-2xl);
line-height: var(--lh-tight);
// overflow-wrap: anywhere isn't supported in Safari, in which case this fallback applies
overflow-wrap: break-word;
overflow-wrap: anywhere;
@media (min-width: $breakpoint-s) {
font-size: var(--fs-3xl);
}

2
app/views/articles/_sidebar.html.erb
View file

@ -1,4 +1,4 @@
<div id="sidebar-wrapper-left" class="sidebar-wrapper sidebar-wrapper-left crayons-layout__sidebar-left">
<div id="sidebar-wrapper-left" class="sidebar-wrapper sidebar-wrapper-left crayons-layout__sidebar-left crayons-layout__content">
<aside class="side-bar" aria-label="Primary sidebar">
<% cache(release_adjusted_cache_key("main-sidebar-nav--#{user_signed_in?}"), expires_in: 15.minutes) do %>
<%= render "shared/auth_widget" unless user_signed_in? %>

2
app/views/articles/_sidebar_additional.html.erb
View file

@ -1,4 +1,4 @@
<div id="sidebar-wrapper-right" class="sidebar-wrapper sidebar-wrapper-right crayons-layout__sidebar-right">
<div id="sidebar-wrapper-right" class="sidebar-wrapper sidebar-wrapper-right crayons-layout__sidebar-right crayons-layout__content">
<% unless user_signed_in? %>
<%= render "sidebars/homepage_content" %>
<% end %>

2
app/views/articles/_sidebar_listings.html.erb
View file

@ -1,6 +1,6 @@
<% @listings = Listing.where(published: true).select(:title, :classified_listing_category_id, :slug, :bumped_at) %>
<% if params[:timeframe].blank? && @listings.any? %>
<section class="crayons-card crayons-card--secondary">
<section class="crayons-card crayons-card--secondary crayons-layout__content">
<header class="crayons-card__header">
<h3 class="crayons-subtitle-2"><%= t("views.main.side.listings.heading") %></h3>
<div class="crayons-card__actions">

2
app/views/comments/index.html.erb
View file

@ -90,7 +90,7 @@
<% else %>
<div id="response-templates-data" class="hidden"></div>
<%= javascript_packs_with_chunks_tag "responseTemplates", "commentsDisplay", defer: true %>
<header class="p-2 pb-4 m:p-6 m:pb-6 crayons-card crayons-card--secondary s:mx-2 m:mx-4 -mb-1 z-0">
<header class="p-2 pb-4 m:p-6 m:pb-6 crayons-card crayons-card--secondary crayons-layout__content s:mx-2 m:mx-4 -mb-1 z-0">
<% if @commentable %>
<h1 class="crayons-subtitle-1 mb-4">
<%= t("views.comments.parent.subtitle_html",

4
app/views/stories/_sign_in_invitation.html.erb
View file

@ -1,10 +1,10 @@
<div class="authentication-feed__card" id="in-feed-cta">
<div class="authentication-feed__container">
<div class="authentication-feed__container crayons-layout__content">
<figure class="authentication-feed__image-container">
<img class="authentication-feed__image" src="<%= optimized_image_url(Settings::General.logo_png, width: 190) %>"
alt="Secondary <%= community_name %> logo" loading="lazy" />
</figure>
<div class="authentication-feed__content">
<div class="authentication-feed__content crayons-layout__content">
<h2 class="authentication-feed__title">
<%= render "shared/authentication_title" %>
</h2>

2
app/views/users/_sidebar.html.erb
View file

@ -1,7 +1,7 @@
<div class="m:gap-4 hidden m:grid js-user-info">
<% cache "user-profile-sidebar-additional-#{@user.id}-#{@user.github_repos_updated_at}-#{@user.badge_achievements_count}-#{@user.organization_info_updated_at}", expires_in: 2.days do %>
<% if @user.organizations.present? %>
<div class="crayons-card crayons-card--secondary">
<div class="crayons-card crayons-card--secondary crayons-layout__content">
<header class="crayons-card__header">
<h3 class="crayons-subtitle-3 spec-org-titles"><%= t("views.users.side.org") %></h3>
</header>

2
app/views/users/show.html.erb
View file

@ -132,7 +132,7 @@
data-feed="<%= params[:timeframe] || "base-feed" %>"
data-articles-since="0">
<div class="crayons-layout__sidebar-left">
<div class="crayons-layout__sidebar-left crayons-layout__content">
<%= render partial: "users/sidebar", locals: { repositories: @github_repositories } %>
</div>