Merge pull request #7938 from fjordllc/css-bugs

レイアウト崩れの修正

app/javascript/stylesheets/application/blocks/form/_block-checks.sass

@@ -11,10 +11,10 @@
   .block-checks.is-1-item.is-centered &
     width: 20rem
   .block-checks.is-2-items &
-    +media-breakpoint-up(md)
+    +media-breakpoint-up(sm)
       flex: 0 0 calc((100% - .5rem) / 2)
       max-width: calc((100% - .5rem) / 2)
-    +media-breakpoint-down(sm)
+    +media-breakpoint-down(xs)
       flex: 0 0 100%
       max-width: 100%
   .block-checks.is-3-items &

app/javascript/stylesheets/application/blocks/form/_form-actions.sass

@@ -43,14 +43,9 @@
     +media-breakpoint-down(sm)
       margin-bottom: 1rem
   &.is-main
-    +media-breakpoint-up(md)
-      min-width: 18rem
-      max-width: 50%
-      .auth-form__body &
-        min-width: 50%
-        max-width: 100%
-        width: 17.5rem
-    +media-breakpoint-down(sm)
+    +media-breakpoint-up(sm)
+      min-width: 13rem
+    +media-breakpoint-down(xs)
       width: 100%
   &.has-help
     +media-breakpoint-up(md)

app/javascript/stylesheets/application/blocks/page-content/_page-content-header-actions.sass

@@ -1,28 +1,26 @@
 .page-content-header-actions
   padding-top: .25rem
   display: flex
-  justify-content: space-between
   flex-wrap: wrap
   gap: .5rem
+  +media-breakpoint-up(sm)
+    justify-content: space-between
+  +media-breakpoint-down(xs)
+    justify-content: center
 
 .page-content-header-actions__start,
 .page-content-header-actions__end
   display: flex
   gap: .5rem
-  +media-breakpoint-up(md)
+  +media-breakpoint-up(sm)
     flex: 1
-  +media-breakpoint-down(sm)
-    flex: 0 0 100%
-
-.page-content-header-actions__start
-  +media-breakpoint-down(sm)
-    flex: 2
 
 .page-content-header-actions__start
   justify-content: flex-start
 
 .page-content-header-actions__end
-  justify-content: flex-end
+  +media-breakpoint-up(sm)
+    justify-content: flex-end
 
 .page-content-header-actions__action
   min-width: 5.5rem

app/javascript/stylesheets/application/blocks/page-content/_page-content-header.sass

@@ -71,7 +71,7 @@
     margin-top: .5rem
   +media-breakpoint-down(sm)
     +size(2.75rem)
-    +position(absolute, left 0, top 0)
+    +position(absolute, right 0, top 0)
 
 .page-content-header__before-title
   gap: .25rem 1rem

app/javascript/stylesheets/application/blocks/page/_page-header-actions.sass

@@ -7,7 +7,9 @@
   display: flex
   gap: .5rem
   justify-content: center
-  +media-breakpoint-down(md)
+  +media-breakpoint-only(md)
+    padding-block: .5rem
+  +media-breakpoint-down(sm)
     padding-inline: 1rem
     padding-top: .5rem
 

app/javascript/stylesheets/application/blocks/page/_page-header.sass

@@ -8,7 +8,7 @@
     height: 3.25rem
     align-items: center
     justify-content: space-between
-  +media-breakpoint-down(md)
+  +media-breakpoint-down(sm)
     padding-block: .5rem
     flex-direction: column
 

app/javascript/stylesheets/shared/blocks/card/_card-main-actions.sass

@@ -27,9 +27,9 @@
 .card-main-actions__item
   @container card-main-actions (min-width: 20em)
     flex: 1
-    max-width: 15rem
+    max-width: 13rem
     &.is-sub
-      +position(absolute, right 0, bottom 0)
+      flex: 0 0 auto
   @container card-main-actions (max-width: 19.9375em)
     flex-basis: 100%
     max-width: 100%
@@ -42,7 +42,7 @@
     flex-basis: 2.5rem
   .card-main-actions.is-3-items &
     @container card-main-actions (min-width: 20em)
-      flex: 1 0 0
+      flex: 1
 
 .card-main-actions__muted-action
   +hover-link-reversal

app/views/users/_page_title.html.slim

@@ -7,17 +7,16 @@ header.page-header
       .page-header__end
         .page-header-actions
           ul.page-header-actions__items
-            li.page-header-actions__item
-              - if current_user != user
-                - if current_user.adviser? && current_user.company_id == user.company_id && user.trainee
-                  li.page-main-header-actions__item
-                    .a-button.is-disabled.is-sm.is-block
-                      i.fa-solid.fa-check
-                      span
-                        | 自社研修生
-                - else
-                  li.page-main-header-actions__item
-                    = render 'users/following', user:
+            - if current_user != user
+              - if current_user.adviser? && current_user.company_id == user.company_id && user.trainee
+                li.page-main-header-actions__item
+                  .a-button.is-disabled.is-sm.is-block
+                    i.fa-solid.fa-check
+                    span
+                      | 自社研修生
+              - else
+                li.page-main-header-actions__item
+                  = render 'users/following', user:
             li.page-header-actions__item
               = link_to users_path, class: 'a-button is-md is-secondary is-block is-back' do
                 | ユーザー一覧

app/views/works/show.html.slim

@@ -22,9 +22,10 @@ hr.a-border
     .page-content.work
       header.page-content-header
         .page-content-header__start
-          = link_to user_portfolio_path(@work.user), itemprop: 'url', class: 'page-content-header__user-link' do
-            span class="a-user-role is-#{@work.user.primary_role}"
-              = image_tag @work.user.avatar_url, title: @work.user.icon_title, class: 'page-content-header__user-icon a-user-icon'
+          .page-content-header__user
+            = link_to user_portfolio_path(@work.user), itemprop: 'url', class: 'page-content-header__user-link' do
+              span class="a-user-role is-#{@work.user.primary_role}"
+                = image_tag @work.user.avatar_url, title: @work.user.icon_title, class: 'page-content-header__user-icon a-user-icon'
         .page-content-header__end
           .page-content-header__row
             .page-content-header__before-title
@@ -52,22 +53,23 @@ hr.a-border
               = @work.description
         hr.a-border-tint
         .card-footer
-          ul.card-main-actions__items
-            - if @work.url.present?
-              li.card-main-actions__item
-                = link_to @work.url, target: '_blank', rel: 'noopener', class: 'a-button is-sm is-secondary is-block' do
-                  i.fa-solid.fa-globe
-                  | URL
-            - if @work.repository.present?
-              li.card-main-actions__item
-                = link_to @work.repository, target: '_blank', rel: 'noopener', class: 'a-button is-sm is-secondary is-block' do
-                  i.fa-brands.fa-github-alt
-                  | Repository
-            - if @work.launch_article.present?
-              li.card-main-actions__item
-                = link_to @work.launch_article, target: '_blank', rel: 'noopener', class: 'a-button is-sm is-secondary is-block' do
-                  i.fa-solid.fa-newspaper
-                  | リリースブログ
+          .card-main-actions
+            ul.card-main-actions__items
+              - if @work.url.present?
+                li.card-main-actions__item
+                  = link_to @work.url, target: '_blank', rel: 'noopener', class: 'a-button is-sm is-secondary is-block' do
+                    i.fa-solid.fa-globe
+                    | URL
+              - if @work.repository.present?
+                li.card-main-actions__item
+                  = link_to @work.repository, target: '_blank', rel: 'noopener', class: 'a-button is-sm is-secondary is-block' do
+                    i.fa-brands.fa-github-alt
+                    | Repository
+              - if @work.launch_article.present?
+                li.card-main-actions__item
+                  = link_to @work.launch_article, target: '_blank', rel: 'noopener', class: 'a-button is-sm is-secondary is-block' do
+                    i.fa-solid.fa-newspaper
+                    | リリースブログ
         - if @work.user == current_user || admin_or_mentor_login?
           hr.a-border-tint
           .card-footer