OTWO-7435 Make global web layout to landscape format

Gemfile.lock

@@ -2002,7 +2002,7 @@ GEM
     puma (6.6.0)
       nio4r (~> 2.0)
     racc (1.8.1)
-    rack (2.2.19)
+    rack (2.2.20)
     rack-session (1.0.2)
       rack (< 3)
     rack-test (2.2.0)

app/assets/stylesheets/account.sass

@@ -1,6 +1,6 @@
 #accounts_index_page, #people_index_page
   .account_details
-    width: 220px
+    width: 215px
     margin-left: 15px
     position: relative
     height: 128px
@@ -62,13 +62,19 @@
     bottom: 0px
     left: 0px
   .kudo_rank
-    margin-top: 0px
-    font-size: 30px
+    display: flex
+    flex-direction: column
+    justify-content: center
+    align-items: center
     text-align: center
-    padding: 42px 5px 0px 5px
+    font-size: 30px
+    padding-top: 8px
     font-weight: 100
-    width: 35px
     color: #183867
+    > :first-child
+      font-size: 24px
+      font-weight: bold
+      margin-bottom: 5px
   .commits_count
     font-size: 27px
     line-height: 30px
@@ -143,7 +149,7 @@
 .grecaptcha-badge
   display: none
 @media only all and (min-width: 768px) and (max-width: 1024px)
-  #accounts_index_page
+  #accounts_index_page, #people_index_page
     h1
       font-size: 24px
       margin-bottom: 0
@@ -156,9 +162,9 @@
       width: 142px
       margin-left: 5px
     .commits_summary
-      width: 379px
+      width: 100%
     .commits_count
-      width: auto
+      width: 16%
       font-size: 15px
       padding: 31px 0px 12px
       line-height: 20px
@@ -170,10 +176,8 @@
       width: 85px !important
     .kudo_rank
       font-size: 18px
-      padding: 0
+      padding-top: 10px
       font-weight: 500
-      margin-top: 30px !important
-      width: auto
     .kudo_badge
       margin-top: 28px !important
       padding: 0
@@ -184,7 +188,7 @@
     #search-dingus button.btn
       font-size: 10px
 @media only all and (min-width: 320px) and (max-width: 480px)
-  #accounts_index_page
+  #accounts_index_page, #people_index_page
     h1
       font-size: 18px
       margin-bottom: 0
@@ -194,27 +198,28 @@
       margin-bottom: 0
       margin-top: 10px
     .account_details
-      width: auto
+      width: 40%
     .commits_summary
-      width: auto
+      width: 100%
     .commits_count
-      width: auto
+      width: 16%
       font-size: 15px
       padding: 31px 0px 12px
       line-height: 20px
     .kudo_rank
       font-size: 24px
       padding: 0
-      margin-top: 35px
+      margin-top: 10px
     .kudo_badge
-      margin-top: 28px !important
+      margin-top: 5px !important
       padding: 0
     .language_name
       width: 90px !important
     .unclaimed_committers_box .header_row h4
       font-size: 12px
     .well
       min-height: 142px
+      width: 100%
     .unclaimed_committers_box .header_row .btn-mini
       font-size: 8px
     .language_summary
@@ -233,3 +238,22 @@
       width: auto
     #search-dingus select
       width: auto
+@media only all and (min-width: 768px)
+  #accounts_index_page, #people_index_page
+    .person-card
+      width: 49%
+    .well.no_padding.pull-left:nth-of-type(odd)
+      margin-right: 10px
+
+@media (min-width: 800px) and (max-width: 1720px)
+  #accounts_index_page, #people_index_page
+    .account_details
+      width: 50%;
+    .commits_summary
+      width: 100%
+@media (min-width: 1720px) and (max-width: 1820px)
+  #accounts_index_page, #people_index_page
+    .account_details
+      width: 190px
+    .commits_summary
+      width: 455px

app/assets/stylesheets/badges.sass

@@ -68,7 +68,7 @@
 .kudo_badge
   position: inherit !important
   margin: 0 !important
-  padding: 40px 13px
+  padding: 5px 15px
   height: 0px !important
 
 #mini_account_header

app/assets/stylesheets/edits.sass

@@ -54,3 +54,7 @@
   position: absolute
   top: 50%
   left: 50%
+@media only all and (min-width: 320px) and (max-width: 800px)
+  .edit
+    span.editor_details
+      display: block

app/assets/stylesheets/explore.sass

@@ -1,7 +1,7 @@
 #explore_projects_page
   #explore_sidebar
+    padding: 1px 10px 10px 10px
     box-shadow: none
-    width: 28%
     min-height: 650px
     border-radius: 0px
     border: none
@@ -26,23 +26,25 @@
       &::-webkit-input-placeholder
         @include explore-sidebar-placeholder-color
         font-style: italic
+  h2.hot-projects-header
+    margin-top: 0px
   .explore_search
-    width: 173px
+    width: 16em
     margin-top: 7px
     &.tag_autocomplete
-      width: 194px
+      width: 16em
   .explore_compare
-    width: 194px
+    width: 16em
+  #compare_btn
+    height: 34px
+    display: block
 
   #hot_projects td
     :padding 5px
     &.pai
       position: relative
     a[class^="twentyfive_project_activity_level_"]
-      margin-left: 12px
-      margin-top: -12px
-      position: absolute
-      top: 24px
+      margin-left: 0
 
   #project_demographics
     margin-top: 30px
@@ -59,7 +61,7 @@
     margin-left: 10px
 
   #tagcloud
-    :margin 5px
+    :margin 5px 10px 5px 5px
 
   span.tag.container
     background: none
@@ -71,16 +73,94 @@
 
   #value_selector_selected_tags
     width: 400px
+.d-flex
+  display: flex !important
 
-  .add_new_project_btn_bottom
-    margin-top: 25px
-    margin-left: -10px
+.align-items-center
+  align-items: center !important
 
-  .add_new_project_btn_top
-    float: right
-    top: -9px
-    left: 9px
-    height: 30px
-    &.btn-mini
-      padding: 3px 5px !important
+.justify-content-between
+  justify-content: space-between
 
+.mb-3
+  margin-bottom: 1rem !important /* 16px by default */
+
+.table-responsive
+  display: block
+  width: 100%
+  overflow-x: auto
+  -webkit-overflow-scrolling: touch
+
+.mb-2
+  margin-bottom: 0.5rem !important /* 8px by default */
+
+.mb-0
+  margin-bottom: 0 !important
+
+.me-2
+  margin-right: 0.5rem !important
+
+/* In RTL mode, Bootstrap would flip this to: */
+[dir="rtl"] .me-2
+  margin-left: 0.5rem !important
+  margin-right: 0 !important
+
+.flex-column
+  flex-direction: column !important
+
+#hot_projects thead, #hot_projects tr
+  width: 100%
+  display: table
+  table-layout: fixed
+
+@media (max-width: 768px)
+  .table-responsive
+    overflow-x: auto
+
+  #hot_projects
+    min-width: 450px /* Minimum width to prevent squashing */
+
+  #hot_projects th, #hot_projects td
+    white-space: normal
+    overflow: visible
+    text-overflow: clip
+    word-wrap: break-word
+    hyphens: auto
+
+@media (max-width: 480px)
+  #explore_projects_page
+    .explore_search
+      width: 18em
+      &.tag_autocomplete
+        width: 18em
+    .explore_compare
+      width: 18em
+    #demographics_chart
+      min-height: 120px
+
+@media (min-width: 768px)
+  .flex-md-row
+    flex-direction: row !important
+
+@media (min-width: 1180px) and (max-width: 1366px)
+  #explore_projects_page
+    .explore_search
+      width: 11em
+      &.tag_autocomplete
+        width: 11em
+    .explore_compare
+      width: 11em
+
+@media (min-width: 900px) and (max-width: 1180px)
+  #explore_projects_page
+    .explore_search
+      width: 14em
+      &.tag_autocomplete
+        width: 14em
+    .explore_compare
+      width: 14em
+
+@media (min-width: 1080px)
+  #explore_projects_page
+    #hot_projects thead, #hot_projects tr, #hot_projects td
+      font-size: 14px