From b43aaa1d5868d40a1ad4b1caa0985eddf1c81bb8 Mon Sep 17 00:00:00 2001
From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 17 Nov 2021 11:49:52 +0000
Subject: [PATCH 01/10] Remove the floating from the sidebar close buttons

These are mostly positioned with flexbox, and those that aren't
are covered by the similar close-wrap selector elsewhere in this file
---
 app/assets/stylesheets/common.scss | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index f2afdcf7a..017d8a0d8 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -389,11 +389,6 @@ body.compact-nav {
       }
     }
 
-    .icon.close {
-      float: right;
-      cursor: pointer;
-    }
-
     .flash {
       padding: 15px;
 

From 846bacd665bd7220ab1f02d1951790077466f6e5 Mon Sep 17 00:00:00 2001
From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 17 Nov 2021 11:51:41 +0000
Subject: [PATCH 02/10] Remove the custom flash styling for sidebar flashes

The flash partial is now based on flexbox, so these positioning classes
are no longer required
---
 app/assets/stylesheets/common.scss | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 017d8a0d8..3cb69cf0b 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -388,18 +388,6 @@ body.compact-nav {
         top: 20px;
       }
     }
-
-    .flash {
-      padding: 15px;
-
-      picture {
-        margin-right: -25px;
-      }
-
-      div.message {
-        margin-left: 30px;
-      }
-    }
   }
 
   .overlay-sidebar #sidebar {

From 300cd884ec5a8bd76be912f7d745e0ced7761175 Mon Sep 17 00:00:00 2001
From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 17 Nov 2021 15:52:59 +0000
Subject: [PATCH 03/10] Use flex grid instead of floating to position changeset
 element paging nav

This works much better when either the heading or the paging is long.

The heading was moved into the partial to avoid repetitive grid definitions
---
 app/assets/stylesheets/common.scss    |  2 --
 app/views/browse/_paging_nav.html.erb | 19 ++++++++++++++-----
 app/views/browse/changeset.html.erb   | 15 +++------------
 3 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 3cb69cf0b..58642dd55 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -803,8 +803,6 @@ tr.turn:hover {
   }
 
   .paginate {
-    float: right;
-    padding: 1px 6px;
     border: 1px solid $lightgrey;
     border-radius: 3px;
   }
diff --git a/app/views/browse/_paging_nav.html.erb b/app/views/browse/_paging_nav.html.erb
index 67f1c75a3..713a1d6d4 100644
--- a/app/views/browse/_paging_nav.html.erb
+++ b/app/views/browse/_paging_nav.html.erb
@@ -1,5 +1,14 @@
-<% if pages.page_count > 1 %>
-  <span class="paginate">
-    <%= raw pagination_links_each(pages, {}) { |n| link_to(n, page_param => n) } %>
-  </span>
-<% end %>
+<div class="row">
+  <div class="col">
+    <h4><%= heading %></h4>
+  </div>
+  <% if pages.page_count > 1 %>
+    <div class="col-auto">
+      <h4>
+        <span class="paginate p-1">
+          <%= raw pagination_links_each(pages, {}) { |n| link_to(n, page_param => n) } %>
+        </span>
+      </h4>
+    </div>
+  <% end %>
+</div>
diff --git a/app/views/browse/changeset.html.erb b/app/views/browse/changeset.html.erb
index 496589a08..523cb84d6 100644
--- a/app/views/browse/changeset.html.erb
+++ b/app/views/browse/changeset.html.erb
@@ -86,10 +86,7 @@
   <% end %>
 
   <% unless @ways.empty? %>
-    <h4>
-      <%= type_and_paginated_count("way", @way_pages) %>
-      <%= render :partial => "paging_nav", :locals => { :pages => @way_pages, :page_param => "way_page" } %>
-    </h4>
+    <%= render :partial => "paging_nav", :locals => { :heading => type_and_paginated_count("way", @way_pages), :pages => @way_pages, :page_param => "way_page" } %>
     <ul class="list-unstyled">
       <% @ways.each do |way| %>
         <li><%= link_to printable_name(way, :version => true), { :action => "way", :id => way.way_id.to_s }, { :class => link_class("way", way), :title => link_title(way) } %></li>
@@ -98,10 +95,7 @@
   <% end %>
 
   <% unless @relations.empty? %>
-    <h4>
-      <%= type_and_paginated_count("relation", @relation_pages) %>
-      <%= render :partial => "paging_nav", :locals => { :pages => @relation_pages, :page_param => "relation_page" } %>
-    </h4>
+    <%= render :partial => "paging_nav", :locals => { :heading => type_and_paginated_count("relation", @relation_pages), :pages => @relation_pages, :page_param => "relation_page" } %>
     <ul class="list-unstyled">
       <% @relations.each do |relation| %>
         <li><%= link_to printable_name(relation, :version => true), { :action => "relation", :id => relation.relation_id.to_s }, { :class => link_class("relation", relation), :title => link_title(relation) } %></li>
@@ -110,10 +104,7 @@
   <% end %>
 
   <% unless @nodes.empty? %>
-    <h4>
-      <%= type_and_paginated_count("node", @node_pages) %>
-      <%= render :partial => "paging_nav", :locals => { :pages => @node_pages, :page_param => "node_page" } %>
-    </h4>
+    <%= render :partial => "paging_nav", :locals => { :heading => type_and_paginated_count("node", @node_pages), :pages => @node_pages, :page_param => "node_page" } %>
     <ul class="list-unstyled">
       <% @nodes.each do |node| %>
         <li><%= link_to printable_name(node, :version => true), { :action => "node", :id => node.node_id.to_s }, { :class => link_class("node", node), :title => link_title(node), :rel => link_follow(node) } %></li>

From f433fb3d4eb9ba9d26aad2070d316e2e7d35b8b9 Mon Sep 17 00:00:00 2001
From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 17 Nov 2021 16:36:58 +0000
Subject: [PATCH 04/10] Remove border-radius parameter

This overrides the same variable from bootstrap. Since bootstrap
also comes with -sm and -lg variants defined by rem, our px-based
override doesn't sit nicely with those.
---
 app/assets/stylesheets/parameters.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/assets/stylesheets/parameters.scss b/app/assets/stylesheets/parameters.scss
index d1d3db573..6cbbf1a27 100644
--- a/app/assets/stylesheets/parameters.scss
+++ b/app/assets/stylesheets/parameters.scss
@@ -15,6 +15,5 @@ $hovercolor: 20%;
 $headerHeight: 55px;
 $sidebarWidth: 350px;
 $keyline: 1px solid $lightgrey;
-$border-radius: 3px;
 $list-highlight: #FFFFC0;
 $border: 1px solid $grey;

From 52cd62bf1309a91813b8dfccaf5f7ce9859007f1 Mon Sep 17 00:00:00 2001
From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 17 Nov 2021 17:33:14 +0000
Subject: [PATCH 05/10] Replace CSS-driven borders with bootstrap borders

This makes future refactoring easier, since the elements will
retain their borders even if the hierarchy changes.

Also round some maps and the legale section since I think those now
look nicer.
---
 app/assets/stylesheets/common.scss     | 25 ++++++++++---------------
 app/helpers/user_helper.rb             |  6 +++---
 app/views/browse/_paging_nav.html.erb  |  2 +-
 app/views/browse/_tag_details.html.erb |  2 +-
 app/views/dashboards/show.html.erb     |  4 ++--
 app/views/diary_entries/_form.html.erb |  2 +-
 app/views/profiles/edit.html.erb       |  2 +-
 app/views/site/export.html.erb         |  2 +-
 app/views/users/terms.html.erb         |  2 +-
 test/helpers/user_helper_test.rb       | 12 ++++++------
 10 files changed, 27 insertions(+), 32 deletions(-)

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 58642dd55..b0016a3fb 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -79,6 +79,16 @@ a {
   color: $blue;
 }
 
+/* Rules for borders */
+/* These add additional colours to those provided by bootstrap */
+.border-grey {
+  border-color: $grey !important;
+}
+
+.border-lightgrey {
+  border-color: $lightgrey !important;
+}
+
 /* Rules for the header */
 
 #menu-icon {
@@ -802,11 +812,6 @@ tr.turn:hover {
     border-bottom: none;
   }
 
-  .paginate {
-    border: 1px solid $lightgrey;
-    border-radius: 3px;
-  }
-
   .browse-field {
     margin-bottom: 10px;
 
@@ -830,8 +835,6 @@ tr.turn:hover {
 
   .browse-tag-list {
     background-color: $offwhite;
-    border: 1px solid $grey;
-    border-radius: 3px;
     table-layout: fixed;
     border-collapse: separate;
     border-spacing: 0;
@@ -954,8 +957,6 @@ tr.turn:hover {
 
   .export_boxy {
     background: $lightgrey;
-    border: 1px solid $grey;
-    border-radius: 3px;
 
     #maxlat { margin-top: -1px; }
     #minlon {
@@ -1063,7 +1064,6 @@ tr.turn:hover {
 
 .content_map {
   height: 200px;
-  border: 1px solid $grey;
   margin-bottom: $lineheight;
 }
 
@@ -1132,7 +1132,6 @@ tr.turn:hover {
 .diary_entries {
   #map {
     height: 400px;
-    border: 1px solid $grey;
     display: none;
     margin-bottom: $lineheight;
   }
@@ -1180,7 +1179,6 @@ tr.turn:hover {
 
 .users-terms {
   .legale {
-    border: 1px solid $grey;
     padding: $lineheight;
     margin-bottom: $lineheight;
     overflow: auto;
@@ -1378,13 +1376,11 @@ tr.turn:hover {
 img.user_image {
   max-width: 100px;
   max-height: 100px;
-  border: 1px solid $grey;
 }
 
 img.user_thumbnail {
   max-width: 50px;
   max-height: 50px;
-  border: 1px solid $grey;
 }
 
 img.user_thumbnail_tiny {
@@ -1392,7 +1388,6 @@ img.user_thumbnail_tiny {
   height: auto;
   max-width: 25px;
   max-height: 25px;
-  border: 1px solid $grey;
 }
 
 /* Rules for geo microformats */
diff --git a/app/helpers/user_helper.rb b/app/helpers/user_helper.rb
index eed55cd9d..a6161fa43 100644
--- a/app/helpers/user_helper.rb
+++ b/app/helpers/user_helper.rb
@@ -2,7 +2,7 @@ module UserHelper
   # User images
 
   def user_image(user, options = {})
-    options[:class] ||= "user_image"
+    options[:class] ||= "user_image border border-grey"
     options[:alt] ||= ""
 
     if user.image_use_gravatar
@@ -15,7 +15,7 @@ module UserHelper
   end
 
   def user_thumbnail(user, options = {})
-    options[:class] ||= "user_thumbnail"
+    options[:class] ||= "user_thumbnail border border-grey"
     options[:alt] ||= ""
 
     if user.image_use_gravatar
@@ -28,7 +28,7 @@ module UserHelper
   end
 
   def user_thumbnail_tiny(user, options = {})
-    options[:class] ||= "user_thumbnail_tiny"
+    options[:class] ||= "user_thumbnail_tiny border border-grey"
     options[:alt] ||= ""
 
     if user.image_use_gravatar
diff --git a/app/views/browse/_paging_nav.html.erb b/app/views/browse/_paging_nav.html.erb
index 713a1d6d4..e13b1a9b8 100644
--- a/app/views/browse/_paging_nav.html.erb
+++ b/app/views/browse/_paging_nav.html.erb
@@ -5,7 +5,7 @@
   <% if pages.page_count > 1 %>
     <div class="col-auto">
       <h4>
-        <span class="paginate p-1">
+        <span class="border border-lightgrey rounded p-1">
           <%= raw pagination_links_each(pages, {}) { |n| link_to(n, page_param => n) } %>
         </span>
       </h4>
diff --git a/app/views/browse/_tag_details.html.erb b/app/views/browse/_tag_details.html.erb
index 0e1a3fbef..0868bb8e5 100644
--- a/app/views/browse/_tag_details.html.erb
+++ b/app/views/browse/_tag_details.html.erb
@@ -1,6 +1,6 @@
 <% unless tag_details.empty? %>
   <h4><%= t ".tags" %></h4>
-  <table class='browse-tag-list'>
+  <table class='browse-tag-list border border-grey rounded'>
     <%= render :partial => "tag", :collection => tag_details.sort %>
   </table>
 <% end %>
diff --git a/app/views/dashboards/show.html.erb b/app/views/dashboards/show.html.erb
index 0f04dafb9..d0344ce79 100644
--- a/app/views/dashboards/show.html.erb
+++ b/app/views/dashboards/show.html.erb
@@ -6,7 +6,7 @@
   <% if current_user and @user.id == current_user.id %>
     <div class="col-md order-md-last">
       <% if @user.home_lat.nil? or @user.home_lon.nil? %>
-        <div id="map" class="content_map">
+        <div id="map" class="content_map border border-grey">
           <p class="m-3"><%= t(".no_home_location_html", :edit_profile_link => link_to(t(".edit_your_profile"), edit_profile_path)) %></p>
         </div>
       <% else %>
@@ -19,7 +19,7 @@
              :icon => image_path("marker-red.png"),
              :description => render(:partial => "popup", :object => current_user, :locals => { :type => "your location" })
            } %>
-        <%= tag.div "", :id => "map", :class => "content_map", :data => { :user => user_data } %>
+        <%= tag.div "", :id => "map", :class => "content_map border border-grey rounded", :data => { :user => user_data } %>
       <% end %>
 
       <% friends = @user.friends %>
diff --git a/app/views/diary_entries/_form.html.erb b/app/views/diary_entries/_form.html.erb
index ed7164e88..f72abc19e 100644
--- a/app/views/diary_entries/_form.html.erb
+++ b/app/views/diary_entries/_form.html.erb
@@ -5,7 +5,7 @@
 <fieldset>
   <legend><%= t ".location" -%></legend>
 
-  <%= tag.div "", :id => "map", :data => { :lat => @lat, :lon => @lon, :zoom => @zoom } %>
+  <%= tag.div "", :id => "map", :class => "border border-grey rounded", :data => { :lat => @lat, :lon => @lon, :zoom => @zoom } %>
 
   <div class="form-row">
     <%= f.text_field :latitude, :wrapper_class => "col-sm-4", :id => "latitude" %>
diff --git a/app/views/profiles/edit.html.erb b/app/views/profiles/edit.html.erb
index 8eca6f4f7..c57f98a04 100644
--- a/app/views/profiles/edit.html.erb
+++ b/app/views/profiles/edit.html.erb
@@ -53,7 +53,7 @@
       <input class="form-check-input" type="checkbox" name="updatehome" value="1" <% unless current_user.home_lat and current_user.home_lon %> checked="checked" <% end %> id="updatehome" />
       <label class="form-check-label" for="updatehome"><%= t ".update home location on click" %></label>
     </div>
-    <%= tag.div "", :id => "map", :class => "content_map set_location" %>
+    <%= tag.div "", :id => "map", :class => "content_map set_location border border-grey rounded" %>
   </fieldset>
 
   <%= f.primary t(".save") %>
diff --git a/app/views/site/export.html.erb b/app/views/site/export.html.erb
index e612ff1af..b3a3bd0e9 100644
--- a/app/views/site/export.html.erb
+++ b/app/views/site/export.html.erb
@@ -6,7 +6,7 @@
   <%= hidden_field_tag "format", "osm", :autocomplete => "off" %>
 
   <div class='export_area_inputs'>
-    <div class='export_boxy'>
+    <div class='export_boxy border border-grey rounded'>
       <%= text_field_tag("maxlat", nil, :size => 10, :autocomplete => "off", :class => "export_bound form-control mx-auto") %>
       <div class="clearfix">
         <%= text_field_tag("minlon", nil, :size => 10, :autocomplete => "off", :class => "export_bound form-control") %>
diff --git a/app/views/users/terms.html.erb b/app/views/users/terms.html.erb
index 05cf62e3e..58bddaca5 100644
--- a/app/views/users/terms.html.erb
+++ b/app/views/users/terms.html.erb
@@ -30,7 +30,7 @@
     <% end %>
   </div>
 
-  <div id="contributorTerms" class="legale">
+  <div id="contributorTerms" class="legale border border-grey rounded">
     <%= render :partial => "terms" %>
   </div>
 
diff --git a/test/helpers/user_helper_test.rb b/test/helpers/user_helper_test.rb
index 8cef4d2dc..11a47a195 100644
--- a/test/helpers/user_helper_test.rb
+++ b/test/helpers/user_helper_test.rb
@@ -8,12 +8,12 @@ class UserHelperTest < ActionView::TestCase
     gravatar_user = create(:user, :image_use_gravatar => true)
 
     image = user_image(user)
-    assert_match %r{^<img class="user_image" .* src="/images/avatar_large.png" />$}, image
+    assert_match %r{^<img class="user_image border border-grey" .* src="/images/avatar_large.png" />$}, image
 
     image = user_image(user, :class => "foo")
     assert_match %r{^<img class="foo" .* src="/images/avatar_large.png" />$}, image
     image = user_image(gravatar_user)
-    assert_match %r{^<img class="user_image" .* src="http://www.gravatar.com/avatar/.*" />$}, image
+    assert_match %r{^<img class="user_image border border-grey" .* src="http://www.gravatar.com/avatar/.*" />$}, image
 
     image = user_image(gravatar_user, :class => "foo")
     assert_match %r{^<img class="foo" .* src="http://www.gravatar.com/avatar/.*" />$}, image
@@ -24,13 +24,13 @@ class UserHelperTest < ActionView::TestCase
     gravatar_user = create(:user, :image_use_gravatar => true)
 
     image = user_thumbnail(user)
-    assert_match %r{^<img class="user_thumbnail" .* src="/images/avatar_small.png" />$}, image
+    assert_match %r{^<img class="user_thumbnail border border-grey" .* src="/images/avatar_small.png" />$}, image
 
     image = user_thumbnail(user, :class => "foo")
     assert_match %r{^<img class="foo" .* src="/images/avatar_small.png" />$}, image
 
     image = user_thumbnail(gravatar_user)
-    assert_match %r{^<img class="user_thumbnail" .* src="http://www.gravatar.com/avatar/.*" />$}, image
+    assert_match %r{^<img class="user_thumbnail border border-grey" .* src="http://www.gravatar.com/avatar/.*" />$}, image
 
     image = user_thumbnail(gravatar_user, :class => "foo")
     assert_match %r{^<img class="foo" .* src="http://www.gravatar.com/avatar/.*" />$}, image
@@ -41,13 +41,13 @@ class UserHelperTest < ActionView::TestCase
     gravatar_user = create(:user, :image_use_gravatar => true)
 
     image = user_thumbnail_tiny(user)
-    assert_match %r{^<img class="user_thumbnail_tiny" .* src="/images/avatar_small.png" />$}, image
+    assert_match %r{^<img class="user_thumbnail_tiny border border-grey" .* src="/images/avatar_small.png" />$}, image
 
     image = user_thumbnail_tiny(user, :class => "foo")
     assert_match %r{^<img class="foo" .* src="/images/avatar_small.png" />$}, image
 
     image = user_thumbnail_tiny(gravatar_user)
-    assert_match %r{^<img class="user_thumbnail_tiny" .* src="http://www.gravatar.com/avatar/.*" />$}, image
+    assert_match %r{^<img class="user_thumbnail_tiny border border-grey" .* src="http://www.gravatar.com/avatar/.*" />$}, image
 
     image = user_thumbnail_tiny(gravatar_user, :class => "foo")
     assert_match %r{^<img class="foo" .* src="http://www.gravatar.com/avatar/.*" />$}, image

From 3bc20b6f21cb52a1ccaf10728a7e383df9fe7a7e Mon Sep 17 00:00:00 2001
From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 17 Nov 2021 17:39:42 +0000
Subject: [PATCH 06/10] Pass classes to override the default thumbnail_tiny
 style, rather than having another selector overriding

---
 app/assets/stylesheets/common.scss | 5 -----
 app/views/layouts/_header.html.erb | 2 +-
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index b0016a3fb..c957df785 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -226,11 +226,6 @@ nav.secondary {
     }
   }
 
-  img.user_thumbnail_tiny {
-    border: 0;
-    border-radius: 3px;
-  }
-
   #inboxanchor {
     display: inline-block;
     height: 25px;
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index 192b07614..0171752ff 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -81,7 +81,7 @@
     <% if current_user && current_user.id %>
       <div class='d-inline-flex dropdown user-menu logged-in clearfix'>
         <a class='dropdown-toggle btn btn-outline-secondary pl-2 py-1 flex-grow-1' data-toggle='dropdown' href="#">
-          <%= user_thumbnail_tiny(current_user, :width => 25, :height => 25) %>
+          <%= user_thumbnail_tiny(current_user, :width => 25, :height => 25, :class => "user_thumbnail_tiny rounded-sm") %>
           <%= render :partial => "layouts/inbox" %>
           <span class="user-button">
             <span class='username'>

From 514ec41c58914b007fd6c71a54d91f1d8bfba297 Mon Sep 17 00:00:00 2001
From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 17 Nov 2021 17:55:35 +0000
Subject: [PATCH 07/10] Remove unused browse-field style rules

---
 app/assets/stylesheets/common.scss | 21 ---------------------
 1 file changed, 21 deletions(-)

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index c957df785..01062bd61 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -807,27 +807,6 @@ tr.turn:hover {
     border-bottom: none;
   }
 
-  .browse-field {
-    margin-bottom: 10px;
-
-    h4 {
-      padding: 5px 0 5px 10px;
-      font-size: 12px;
-      border: 1px solid $grey;
-      border-radius: 4px 4px 0 0;
-      background-color: $offwhite;
-    }
-
-    p {
-      padding: 7px 10px;
-      font-size: 12px;
-      background-color: #FFF;
-      border: 1px solid $grey;
-      border-top: 0;
-      border-radius: 0 0 4px 4px;
-    }
-  }
-
   .browse-tag-list {
     background-color: $offwhite;
     table-layout: fixed;

From cb68450ac7b7a8dec6d0d721b9a7314bf1c7e95f Mon Sep 17 00:00:00 2001
From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 17 Nov 2021 18:07:24 +0000
Subject: [PATCH 08/10] Simplify margins when showing diary entries

---
 app/assets/stylesheets/common.scss                | 13 -------------
 app/views/diary_entries/_diary_entry.html.erb     |  2 +-
 test/controllers/diary_entries_controller_test.rb |  4 ++--
 3 files changed, 3 insertions(+), 16 deletions(-)

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 01062bd61..1562b3fca 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -1079,23 +1079,10 @@ tr.turn:hover {
   padding-bottom: $lineheight/2;
   border-top: 1px solid $grey;
 
-  &:first-of-type {
-    margin-top: $lineheight/2;
-  }
-
   &.deleted {
     background-color: #fee;
   }
 
-  .post_heading {
-    margin-bottom: $lineheight;
-
-    h2 {
-      margin-top: 0;
-      margin-bottom: $lineheight/2;
-    }
-  }
-
   img.user_thumbnail {
     float: left;
   }
diff --git a/app/views/diary_entries/_diary_entry.html.erb b/app/views/diary_entries/_diary_entry.html.erb
index 2b3dad055..68b0a265a 100644
--- a/app/views/diary_entries/_diary_entry.html.erb
+++ b/app/views/diary_entries/_diary_entry.html.erb
@@ -1,5 +1,5 @@
 <div class='diary_post<%= " text-muted px-3 deleted" unless diary_entry.visible %> user_<%= diary_entry.user.id %>'>
-  <div class='post_heading'>
+  <div class='mb-3'>
     <% if @user %>
       <h2><%= link_to diary_entry.title, diary_entry_path(diary_entry.user, diary_entry) %></h2>
     <% else %>
diff --git a/test/controllers/diary_entries_controller_test.rb b/test/controllers/diary_entries_controller_test.rb
index 33e483652..b1e9b72f2 100644
--- a/test/controllers/diary_entries_controller_test.rb
+++ b/test/controllers/diary_entries_controller_test.rb
@@ -319,7 +319,7 @@ class DiaryEntriesControllerTest < ActionDispatch::IntegrationTest
       assert_select "h1", :text => /#{entry.user.display_name}'s Diary/, :count => 1
     end
     assert_select "div#content", :count => 1 do
-      assert_select "div.post_heading", :text => /#{new_title}/, :count => 1
+      assert_select "h2", :text => /#{new_title}/, :count => 1
       # This next line won't work if the text has been run through the htmlize function
       # due to formatting that could be introduced
       assert_select "p", :text => /#{new_body}/, :count => 1
@@ -339,7 +339,7 @@ class DiaryEntriesControllerTest < ActionDispatch::IntegrationTest
       assert_select "h1", :text => /#{entry.user.display_name}'s Diary/, :count => 1
     end
     assert_select "div#content", :count => 1 do
-      assert_select "div.post_heading", :text => /#{new_title}/, :count => 1
+      assert_select "h2", :text => /#{new_title}/, :count => 1
       # This next line won't work if the text has been run through the htmlize function
       # due to formatting that could be introduced
       assert_select "p", :text => /#{new_body}/, :count => 1

From 8249b41a831d0ac62f6f340a11ef5d166168c957 Mon Sep 17 00:00:00 2001
From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 17 Nov 2021 18:10:11 +0000
Subject: [PATCH 09/10] Remove some unused thumbnail rules

These are all done with flex grids now, so no need to float the image anywhere
---
 app/assets/stylesheets/common.scss | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 1562b3fca..e2c66190c 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -1082,10 +1082,6 @@ tr.turn:hover {
   &.deleted {
     background-color: #fee;
   }
-
-  img.user_thumbnail {
-    float: left;
-  }
 }
 
 /* Rules for the diary entry page */
@@ -1121,10 +1117,6 @@ tr.turn:hover {
   }
 }
 
-.diary_entries-show img.user_thumbnail {
-  float: left;
-}
-
 /* Rules for the log in page */
 
 #login_auth_buttons {

From 675f72fe359748ac0b573eadcc3c4248d6a477e5 Mon Sep 17 00:00:00 2001
From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 17 Nov 2021 18:23:38 +0000
Subject: [PATCH 10/10] Use flex grid to position changeset discussion
 subscribe button

This avoids needing any floats. Also remove buttons class from two
locations, since there is a min-width on that class and it affects
the button styling negatively for standalone buttons
---
 app/assets/stylesheets/common.scss  | 10 ---------
 app/views/browse/changeset.html.erb | 32 ++++++++++++++++-------------
 2 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index e2c66190c..fe3693267 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -860,16 +860,6 @@ tr.turn:hover {
     }
   }
 
-  .comments-header {
-    float: left;
-  }
-
-  .subscribe-buttons {
-    float: left;
-    margin: 0 10px;
-    min-width: 80px;
-  }
-
   .subscribe-buttons input {
     font-size: 90%;
     line-height: 15px;
diff --git a/app/views/browse/changeset.html.erb b/app/views/browse/changeset.html.erb
index 523cb84d6..6aa0f11fb 100644
--- a/app/views/browse/changeset.html.erb
+++ b/app/views/browse/changeset.html.erb
@@ -10,21 +10,25 @@
 
   <%= render :partial => "tag_details", :object => @changeset.tags.except("comment") %>
 
-  <h4 class="comments-header"><%= t(".discussion") %></h4>
-
-  <% if current_user %>
-    <div class="buttons clearfix subscribe-buttons">
-      <form action="#">
-        <% if @changeset.subscribers.exists?(current_user.id) %>
-          <input class="action-button btn btn-sm btn-primary" type="submit" name="unsubscribe" value="<%= t("javascripts.changesets.show.unsubscribe") %>" data-method="POST" data-url="<%= changeset_unsubscribe_url(@changeset) %>" />
-        <% else %>
-          <input class="action-button btn btn-sm btn-primary" type="submit" name="subscribe" value="<%= t("javascripts.changesets.show.subscribe") %>" data-method="POST" data-url="<%= changeset_subscribe_url(@changeset) %>" />
-        <% end %>
-      </form>
+  <div class="row">
+    <div class="col">
+      <h4><%= t(".discussion") %></h4>
     </div>
-  <% end %>
 
-  <div class="clearfix"></div>
+    <% if current_user %>
+      <div class="col-auto">
+        <div class="subscribe-buttons">
+          <form action="#">
+            <% if @changeset.subscribers.exists?(current_user.id) %>
+              <input class="action-button btn btn-sm btn-primary" type="submit" name="unsubscribe" value="<%= t("javascripts.changesets.show.unsubscribe") %>" data-method="POST" data-url="<%= changeset_unsubscribe_url(@changeset) %>" />
+            <% else %>
+              <input class="action-button btn btn-sm btn-primary" type="submit" name="subscribe" value="<%= t("javascripts.changesets.show.subscribe") %>" data-method="POST" data-url="<%= changeset_subscribe_url(@changeset) %>" />
+            <% end %>
+          </form>
+        </div>
+      </div>
+    <% end %>
+  </div>
 
   <% if @comments.length > 0 %>
     <div class='changeset-comments'>
@@ -74,7 +78,7 @@
         <div class="form-group">
           <textarea class="form-control" name="text" cols="40" rows="5"></textarea>
         </div>
-        <div class="buttons clearfix">
+        <div>
           <input type="submit" name="comment" value="<%= t("javascripts.changesets.show.comment") %>" data-changeset-id="<%= @changeset.id %>" data-method="POST" data-url="<%= changeset_comment_url(@changeset) %>" disabled="1" class="btn btn-sm btn-primary" />
         </div>
       </form>