diff --git a/app/assets/javascripts/utilities/buildCommentHTML.js.erb b/app/assets/javascripts/utilities/buildCommentHTML.js.erb
index 0547742a5..0619469a3 100644
--- a/app/assets/javascripts/utilities/buildCommentHTML.js.erb
+++ b/app/assets/javascripts/utilities/buildCommentHTML.js.erb
@@ -46,12 +46,12 @@ function buildCommentHTML(comment) {
     <img class="crayons-avatar__image" width="32" height="32" src="${ comment.user.profile_pic }" alt="${ comment.user.username } profile" />
   </a>`;
 
-  commentHeader = `<div class="comment__header m:pl-1" >
+  commentHeader = `<div class="comment__header" >
     <a href="/${ comment.user.username }" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
       <span class="js-comment-username">${ comment.user.name }</span>
     </a>
     <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
-      <button id="comment-profile-preview-trigger-${comment.id}" aria-controls="comment-profile-preview-content-${comment.id}" class="profile-preview-card__trigger px-2 crayons-btn crayons-btn--ghost" aria-label="${comment.user.name} profile details">${comment.user.name}</button>
+      <button id="comment-profile-preview-trigger-${comment.id}" aria-controls="comment-profile-preview-content-${comment.id}" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="${comment.user.name} profile details">${comment.user.name}</button>
       <span data-js-comment-user-id="${comment.user.id}" data-js-dropdown-content-id="comment-profile-preview-content-${comment.id}" class="preview-card-placeholder"></span>
     </div>
     <span class="color-base-30 px-2 m:pl-0" role="presentation">&bull;</span>
@@ -66,13 +66,15 @@ function buildCommentHTML(comment) {
       <button  id="comment-dropdown-trigger-${comment.id}" aria-controls="comment-dropdown-${comment.id}" aria-expanded="false" class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon" aria-label="Toggle dropdown menu" aria-haspopup="true">
         ${ iconSmallOverflowHorizontal }
       </button>
-      <ul id="comment-dropdown-${comment.id}" class="crayons-dropdown p-1 right-1 s:right-0 s:left-auto fs-base dropdown">
-        <li><a href="${ comment.url }" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to ${ comment.user.name }'s comment" data-no-instant>Copy link</a></li>
-        <li><a href="${ comment.url }/settings" class="crayons-link crayons-link--block" aria-label="Go to ${ comment.user.name }'s comment settings">Settings</a></li>
-        <li><a href="/report-abuse?url=${ comment.url }" class="crayons-link crayons-link--block" aria-label="Report ${ comment.user.name }'s comment as abusive or violating our code of conduct and/or terms and conditions">Report abuse</a></li>
-        <li class="${ comment.newly_created ? '' : 'hidden' }"><a href="${ comment.url }/edit" class="crayons-link crayons-link--block" rel="nofollow" aria-label="Edit this comment">Edit</a></li>
-        <li class="${ comment.newly_created ? '' : 'hidden' }"><a data-no-instant="" href="${ comment.url }/delete_confirm" class="crayons-link crayons-link--block" rel="nofollow" aria-label="Delete this comment">Delete</a></li>
-      </ul>
+      <div id="comment-dropdown-${comment.id}" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
+        <ul class="m-0">
+          <li><a href="${ comment.url }" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to ${ comment.user.name }'s comment" data-no-instant>Copy link</a></li>
+          <li><a href="${ comment.url }/settings" class="crayons-link crayons-link--block" aria-label="Go to ${ comment.user.name }'s comment settings">Settings</a></li>
+          <li><a href="/report-abuse?url=${ comment.url }" class="crayons-link crayons-link--block" aria-label="Report ${ comment.user.name }'s comment as abusive or violating our code of conduct and/or terms and conditions">Report abuse</a></li>
+          <li class="${ comment.newly_created ? '' : 'hidden' }"><a href="${ comment.url }/edit" class="crayons-link crayons-link--block" rel="nofollow" aria-label="Edit this comment">Edit</a></li>
+          <li class="${ comment.newly_created ? '' : 'hidden' }"><a data-no-instant="" href="${ comment.url }/delete_confirm" class="crayons-link crayons-link--block" rel="nofollow" aria-label="Delete this comment">Delete</a></li>
+        </ul>
+      </div>
     </div>
   </div>`;
 
diff --git a/app/assets/stylesheets/components/dropdowns.scss b/app/assets/stylesheets/components/dropdowns.scss
index 6e2230fc2..0f98c1ddf 100644
--- a/app/assets/stylesheets/components/dropdowns.scss
+++ b/app/assets/stylesheets/components/dropdowns.scss
@@ -3,7 +3,7 @@
 .crayons-dropdown {
   position: absolute;
   display: none; // initially hidden
-  padding: var(--su-4);
+  padding: var(--su-2);
   min-width: 250px;
   z-index: var(--z-dropdown);
   background: var(--card-bg);
@@ -17,18 +17,6 @@
     width: max-content;
   }
 
-  &.side-bar {
-    bottom: 100%;
-    font-size: var(--fs-base);
-    padding: var(--su-2);
-    right: var(--su-1);
-    @media (min-width: $breakpoint-m) {
-      right: auto;
-      bottom: auto;
-      top: 0;
-    }
-  }
-
   &.reverse {
     // Flips the dropdown to drop-upwards when set
     bottom: 100%;
diff --git a/app/assets/stylesheets/components/stories.scss b/app/assets/stylesheets/components/stories.scss
index c63217543..e343bb520 100644
--- a/app/assets/stylesheets/components/stories.scss
+++ b/app/assets/stylesheets/components/stories.scss
@@ -12,7 +12,7 @@
 .crayons-story {
   background: var(--card-bg);
   box-shadow: 0 0 0 1px var(--card-border);
-  margin: 0 0 var(--su-3);
+  margin: 0 0 var(--su-2);
   position: relative;
 
   &:focus-within {
diff --git a/app/assets/stylesheets/views/profile.scss b/app/assets/stylesheets/views/profile.scss
index 36d6be785..1735911d4 100644
--- a/app/assets/stylesheets/views/profile.scss
+++ b/app/assets/stylesheets/views/profile.scss
@@ -34,6 +34,8 @@
     right: 0;
     top: var(--su-7);
     position: absolute;
+    left: 0;
+    justify-content: flex-end;
     padding: var(--padding) var(--padding) 0 0;
 
     @media (min-width: $breakpoint-m) {
diff --git a/app/javascript/CommentSubscription/CommentSubscription.jsx b/app/javascript/CommentSubscription/CommentSubscription.jsx
index a121934cd..86d243749 100644
--- a/app/javascript/CommentSubscription/CommentSubscription.jsx
+++ b/app/javascript/CommentSubscription/CommentSubscription.jsx
@@ -144,7 +144,7 @@ export class CommentSubscription extends Component {
             dropdownContentId="subscription-settings-dropdown"
             dropdownContentCloseButtonId="subscription-settings-done-btn"
             data-testid="subscriptions-panel"
-            className={`right-4 left-4 s:right-0 s:left-auto${
+            className={`right-4 left-4 s:right-0 p-4 s:left-auto${
               positionType === 'relative' ? ' w-full' : ''
             }`}
             ref={(element) => {
diff --git a/app/views/articles/_actions.html.erb b/app/views/articles/_actions.html.erb
index 2c50c8372..3c42c1dc9 100644
--- a/app/views/articles/_actions.html.erb
+++ b/app/views/articles/_actions.html.erb
@@ -33,7 +33,7 @@
         <%= inline_svg_tag("overflow-horizontal.svg", aria_hidden: true, class: "dropdown-icon crayons-icon", title: "More...") %>
       </button>
 
-      <div id="article-show-more-dropdown" class="crayons-dropdown side-bar left-1 s:left-auto m:left-100">
+      <div id="article-show-more-dropdown" class="crayons-dropdown side-bar left-2 right-2 m:right-auto m:left-100 s:left-auto bottom-100 m:bottom-auto m:top-0 mb-1 m:mb-0">
         <div>
           <button
             id="copy-post-url-button"
diff --git a/app/views/comments/_comment_header.html.erb b/app/views/comments/_comment_header.html.erb
index 599f11a12..b08ee11c9 100644
--- a/app/views/comments/_comment_header.html.erb
+++ b/app/views/comments/_comment_header.html.erb
@@ -1,4 +1,4 @@
-<div class="comment__header m:pl-1">
+<div class="comment__header">
   <a href="<%= URL.user(comment.user) %>" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden">
     <span class="js-comment-username"><%= comment.user.name %></span>
     <% if commentable_author_is_op?(commentable, comment) %>
@@ -8,7 +8,7 @@
     <% end %>
   </a>
   <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block">
-    <button id="comment-profile-preview-trigger-<%= comment.id %>" aria-controls="comment-profile-preview-content-<%= comment.id %>" class="profile-preview-card__trigger px-2 crayons-btn crayons-btn--ghost" aria-label="<%= comment.user.name %> profile details">
+    <button id="comment-profile-preview-trigger-<%= comment.id %>" aria-controls="comment-profile-preview-content-<%= comment.id %>" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="<%= comment.user.name %> profile details">
       <%= comment.user.name %>
     </button>
     <%= render "/shared/profile_preview_card", actor: comment.user, id: "comment-profile-preview-content-#{comment.id}" %>
@@ -25,18 +25,20 @@
     <button id="comment-dropdown-trigger-<%= comment.id %>" aria-controls="comment-dropdown-<%= comment.id %>" aria-expanded="false" class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon" aria-label="Toggle dropdown menu" aria-haspopup="true">
       <%= inline_svg_tag("small-overflow-horizontal.svg", aria: true, class: "crayons-icon pointer-events-none", title: "Dropdown menu") %>
     </button>
-    <ul id="comment-dropdown-<%= comment.id %>" class="crayons-dropdown p-1 right-1 s:right-0 s:left-auto fs-base dropdown">
-      <li><a href="<%= URL.comment(comment) %>" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to <%= comment.user.name %>'s comment" data-no-instant>Copy link</a></li>
-      <li class="comment-actions hidden" data-user-id="<%= comment.user_id %>" data-action="settings-button" data-path="<%= URL.comment(comment) %>/settings" aria-label="Go to <%= comment.user.name %>'s comment settings"></li>
-      <% action = comment.hidden_by_commentable_user ? "Unhide" : "Hide" %>
-      <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="<%= commentable.user_id %>" data-user-id="<%= comment.user_id %>">
-        <a href="#" class="crayons-link crayons-link--block hide-comment" data-hide-type="<%= action.downcase %>" data-comment-id="<%= comment.id %>" aria-label="<%= action %> <%= comment.user.name %>'s comment">
-          <%= action %>
-        </a>
-      </li>
-      <li class="mod-actions hidden mod-actions-comment-button" data-path="<%= URL.comment(comment) %>/mod" aria-label="Moderate <%= comment.user.name %>'s comment"></li>
-      <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=<%= URL.comment(comment) %>" aria-label="Report <%= comment.user.name %>'s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
-      <li class="current-user-actions"></li>
-    </ul>
+    <div id="comment-dropdown-<%= comment.id %>" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown">
+      <ul class="m-0">
+        <li><a href="<%= URL.comment(comment) %>" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to <%= comment.user.name %>'s comment" data-no-instant>Copy link</a></li>
+        <li class="comment-actions hidden" data-user-id="<%= comment.user_id %>" data-action="settings-button" data-path="<%= URL.comment(comment) %>/settings" aria-label="Go to <%= comment.user.name %>'s comment settings"></li>
+        <% action = comment.hidden_by_commentable_user ? "Unhide" : "Hide" %>
+        <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="<%= commentable.user_id %>" data-user-id="<%= comment.user_id %>">
+          <a href="#" class="crayons-link crayons-link--block hide-comment" data-hide-type="<%= action.downcase %>" data-comment-id="<%= comment.id %>" aria-label="<%= action %> <%= comment.user.name %>'s comment">
+            <%= action %>
+          </a>
+        </li>
+        <li class="mod-actions hidden mod-actions-comment-button" data-path="<%= URL.comment(comment) %>/mod" aria-label="Moderate <%= comment.user.name %>'s comment"></li>
+        <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=<%= URL.comment(comment) %>" aria-label="Report <%= comment.user.name %>'s comment as abusive or violating our code of conduct and/or terms and conditions"></li>
+        <li class="current-user-actions"></li>
+      </ul>
+    </div>
   </div>
 </div>
diff --git a/app/views/dashboards/_dashboard_article.html.erb b/app/views/dashboards/_dashboard_article.html.erb
index 504615243..4ec557df1 100644
--- a/app/views/dashboards/_dashboard_article.html.erb
+++ b/app/views/dashboards/_dashboard_article.html.erb
@@ -13,7 +13,7 @@
       <%= inline_svg_tag("overflow-horizontal.svg", aria: true, class: "crayons-icon", title: "More...") %>
     </button>
 
-    <div id="ellipsis-menu-dropdown-<%= article.id %>" class="crayons-dropdown top-100 right-0 z-10 align-left js-ellipsis-menu-dropdown p-1">
+    <div id="ellipsis-menu-dropdown-<%= article.id %>" class="crayons-dropdown top-100 right-0 z-10 align-left js-ellipsis-menu-dropdown">
       <%= form_for(article, method: :patch, remote: true, authenticity_token: true, html: { "data-type": "json", class: "p-0 js-archive-toggle" }) do |f| %>
         <%= f.hidden_field :archived, value: !article.archived %>
 
diff --git a/app/views/dashboards/_dashboard_article_row.html.erb b/app/views/dashboards/_dashboard_article_row.html.erb
index 0822bd5b6..00546dd70 100644
--- a/app/views/dashboards/_dashboard_article_row.html.erb
+++ b/app/views/dashboards/_dashboard_article_row.html.erb
@@ -98,7 +98,7 @@
         <%= inline_svg_tag("overflow-horizontal.svg", aria: true, class: "crayons-icon", title: "More options for post: #{article.title}") %>
       </button>
 
-      <div id="ellipsis-menu-dropdown-<%= article.id %>" class="crayons-dropdown top-100 right-0 align-left js-ellipsis-menu-dropdown p-1">
+      <div id="ellipsis-menu-dropdown-<%= article.id %>" class="crayons-dropdown top-100 right-0 align-left js-ellipsis-menu-dropdown">
         <% if article.user_subscriptions_count > 0 %>
           <a href="<%= dashboard_subscriptions_path(source_type: "Article", source_id: article.id) %>" class="crayons-link crayons-link--block w-100"><%= "Subscriptions (#{article.user_subscriptions_count})" %></a>
         <% end %>
diff --git a/app/views/layouts/_nav_menu.html.erb b/app/views/layouts/_nav_menu.html.erb
index 5eeca5aba..e1a5f2041 100644
--- a/app/views/layouts/_nav_menu.html.erb
+++ b/app/views/layouts/_nav_menu.html.erb
@@ -1,6 +1,6 @@
-<div class="crayons-dropdown left-2 right-2 s:right-4 s:left-auto p-0 crayons-header__menu__dropdown inline-block m:-mr-2 top-100 -mt-1">
-  <ul class="p-0" id="crayons-header__menu__dropdown__list">
-    <li id="user-profile-link-placeholder" class="border-0 border-b-1 border-solid border-base-20 p-2 mb-2">
+<div class="crayons-dropdown left-2 right-2 s:right-4 s:left-auto crayons-header__menu__dropdown inline-block m:-mr-2 top-100 -mt-1">
+  <ul class="m-0" id="crayons-header__menu__dropdown__list">
+    <li id="user-profile-link-placeholder" class="border-0 border-b-1 border-solid border-base-20 pb-2 mb-2">
       <a id="first-nav-link" class="crayons-link crayons-link--block">
         <div>
           <span class="fw-medium block">...</span>
@@ -9,18 +9,18 @@
       </a>
     </li>
 
-    <li class="px-2 js-header-menu-admin-link hidden">
+    <li class="js-header-menu-admin-link hidden">
       <a href="<%= admin_path %>" class="crayons-link crayons-link--block" data-no-instant>Admin</a>
     </li>
-    <li class="px-2"><a href="<%= dashboard_path %>" class="crayons-link crayons-link--block">Dashboard</a></li>
-    <li class="px-2"><a href="<%= mod_path %>" class="crayons-link crayons-link--block trusted-visible-block">Moderator Center</a></li>
-    <li class="px-2"><a href="<%= new_path %>" class="crayons-link crayons-link--block">Create Post</a></li>
-    <li class="px-2"><a href="<%= readinglist_path %>" class="crayons-link crayons-link--block">Reading list</a></li>
-    <li class="border-0 border-b-1 border-solid border-base-20 px-2 pb-2">
+    <li><a href="<%= dashboard_path %>" class="crayons-link crayons-link--block">Dashboard</a></li>
+    <li><a href="<%= mod_path %>" class="crayons-link crayons-link--block trusted-visible-block">Moderator Center</a></li>
+    <li><a href="<%= new_path %>" class="crayons-link crayons-link--block">Create Post</a></li>
+    <li><a href="<%= readinglist_path %>" class="crayons-link crayons-link--block">Reading list</a></li>
+    <li class="border-0 border-b-1 border-solid border-base-20 pb-2">
       <a href="<%= user_settings_path %>" class="crayons-link crayons-link--block" id="second-last-nav-link">Settings</a>
     </li>
 
-    <li class="px-2 py-2">
+    <li class="pt-2">
       <a href="<%= signout_confirm_path %>" class="crayons-link crayons-link--block" id="last-nav-link">Sign Out</a>
     </li>
   </ul>
diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb
index 7fe683bcf..e5f588a05 100644
--- a/app/views/users/show.html.erb
+++ b/app/views/users/show.html.erb
@@ -36,12 +36,12 @@
               <% end %>
             <% end %>
             <button id="user-follow-butt" class="crayons-btn whitespace-nowrap follow-action-button user-profile-follow-button follow-user" data-info='{"id":<%= @user.id %>,"className":"<%= @user.class.name %>", "name": "<%= @user.name %>"}'>Follow</button>
-            <div class="profile-dropdown ml-2 relative hidden" data-username="<%= @user.username %>">
+            <div class="profile-dropdown ml-2 s:relative hidden" data-username="<%= @user.username %>">
               <button id="user-profile-dropdown" aria-expanded="false" aria-controls="user-profile-dropdownmenu" aria-haspopup="true" class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon">
                 <%= inline_svg_tag("overflow-horizontal.svg", class: "dropdown-icon crayons-icon", aria: true, title: "User actions") %>
               </button>
 
-              <div id="user-profile-dropdownmenu" class="crayons-dropdown top-100 right-0 p-1">
+              <div id="user-profile-dropdownmenu" class="crayons-dropdown left-2 right-2 s:right-0 s:left-auto top-100 mt-1">
                 <%= javascript_packs_with_chunks_tag "profileDropdown", defer: true %>
                 <% if user_signed_in? %>
                   <a href="javascript:void(0);" id="user-profile-dropdownmenu-block-button" data-profile-user-id="<%= @user.id %>" class="border-none crayons-link crayons-link--block">Block @<%= @user.username %></a>