[deploy] Fix chatchannel pagination in connect (#7520)

app/assets/stylesheets/chat.scss

@@ -875,10 +875,13 @@
   padding: 5px;
   resize: none;
   flex-grow: 1;
-  height: 44px;
+  height: 54px;
   background: var(--card-bg);
   border: 1px solid var(--base-40);
   color: var(--body-color);
+  @media screen and (min-width: 600px) {
+    height: 44px;
+  }
   @media screen and (min-height: 1000px) {
     height: 66px;
   }

app/javascript/chat/chat.jsx

@@ -271,7 +271,7 @@ export default class Chat extends Component {
   };
 
   loadPaginatedChannels = (channels) => {
-    const { state } = this.state;
+    const state = this.state;
     const currentChannels = state.chatChannels;
     const currentChannelIds = currentChannels.map((channel) => channel.id);
     const newChannels = currentChannels;
@@ -1146,25 +1146,25 @@ export default class Chat extends Component {
         );
       }
       return (
-        <div className="chat__channels">
-          {notificationsButton}
-          <button
-            className="chat__channelstogglebutt"
-            onClick={this.toggleExpand}
-            style={{ width: '100%' }}
-            type="button"
-          >
-            {'>'}
-          </button>
-          <Channels
-            activeChannelId={state.activeChannelId}
-            chatChannels={state.chatChannels}
-            unopenedChannelIds={state.unopenedChannelIds}
-            handleSwitchChannel={this.handleSwitchChannel}
-            expanded={state.expanded}
-          />
-          {notificationsState}
-        </div>
+          <div className="chat__channels">
+            {notificationsButton}
+            <button
+              className="chat__channelstogglebutt"
+              onClick={this.toggleExpand}
+              style={{ width: '100%' }}
+              type="button"
+            >
+              {'>'}
+            </button>
+            <Channels
+              activeChannelId={state.activeChannelId}
+              chatChannels={state.chatChannels}
+              unopenedChannelIds={state.unopenedChannelIds}
+              handleSwitchChannel={this.handleSwitchChannel}
+              expanded={state.expanded}
+            />
+            {notificationsState}
+          </div>
       );
     }
     return '';

app/views/chat_channel_memberships/index.html.erb

@@ -3,21 +3,21 @@
     <%= flash[:settings_notice] %>
   </div>
 <% end %>
-<div class="user-settings-page">
+<div class="crayons-card mb-6 grid grid-flow-row gap-6 p-6">
   <% if @pending_invites.any? %>
     <h1>Pending Invitations</h1>
     <h3>You may leave a group channel at any point in the future.</h3>
     <% @pending_invites.each do |membership| %>
-      <div>
+      <div class="crayons-field">
         <h2><%= membership.chat_channel.channel_name %></h2>
         <p><%= membership.chat_channel.description %></p>
-        <%= form_for(membership) do |f| %>
+        <%= form_for(membership, html: { class: "grid grid-cols-5" }) do |f| %>
           <%= f.hidden_field :user_action, value: "accept" %>
-          <%= f.submit "Accept", class: "cta" %>
+          <%= f.submit "Accept", class: "crayons-btn" %>
         <% end %>
-        <%= form_for(membership) do |f| %>
+        <%= form_for(membership, html: { class: "grid grid-cols-5" }) do |f| %>
           <%= f.hidden_field :user_action, value: "decline" %>
-          <%= f.submit "Decline", class: "cta cta-danger" %>
+          <%= f.submit "Decline", class: "crayons-btn crayons-btn--danger" %>
         <% end %>
       </div>
     <% end %>