From 87fffa133dbdcd4f35155226ec8198a30fc9d19d Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew.duthie@gsa.gov>
Date: Fri, 30 Aug 2024 10:31:19 -0400
Subject: [PATCH] Remove wide card styles

changelog: Internal, Performance, Reduce size of application stylesheet
---
 app/assets/stylesheets/components/_card.scss | 15 --------
 app/views/test/telephony/index.html.erb      | 36 +++++---------------
 2 files changed, 9 insertions(+), 42 deletions(-)

diff --git a/app/assets/stylesheets/components/_card.scss b/app/assets/stylesheets/components/_card.scss
index da275bb1d68..6f1ccadda8b 100644
--- a/app/assets/stylesheets/components/_card.scss
+++ b/app/assets/stylesheets/components/_card.scss
@@ -5,24 +5,9 @@
   background-color: color('white');
   max-width: $container-skinny-width;
 
-  &-wide {
-    max-width: 100%;
-    padding-bottom: 0;
-    padding-left: 0;
-    padding-right: 0;
-  }
-
   @include at-media('tablet') {
     @include u-padding-x(10);
     @include u-margin-bottom(8);
     border-radius: 5px;
-
-    &-wide {
-      margin-top: units(6);
-      max-width: 100%;
-      padding-bottom: 0;
-      padding-left: 0;
-      padding-right: 0;
-    }
   }
 }
diff --git a/app/views/test/telephony/index.html.erb b/app/views/test/telephony/index.html.erb
index 1ba0946de5a..9ecf05387ad 100644
--- a/app/views/test/telephony/index.html.erb
+++ b/app/views/test/telephony/index.html.erb
@@ -4,16 +4,16 @@
 
 <h1>Outbound calls and messages</h1>
 
+<%= button_to 'Clear messages and calls', test_telephony_path, method: :delete, class: 'usa-button' %>
 
-<div class="card card-wide">
-  <div class="padding-4">
-    <%= button_to 'Clear messages and calls', test_telephony_path, method: :delete, class: 'usa-button' %>
-    <div class="grid-row grid-gap margin-top-2">
-      <div class="tablet:grid-col-6">
-        <h2>Messages</h2>
+<div class="grid-row grid-gap margin-top-2 flex-align-stretch">
+  <% [['Messages', @messages], ['Calls', @calls]].each do |title, messages| %>
+    <div class="tablet:grid-col-6">
+      <div class="card padding-4 height-full">
+        <h2 class="margin-0"><%= title %></h2>
 
-        <% @messages.each do |message| %>
-          <div class="lg-card margin-bottom-4">
+        <% messages.each do |message| %>
+          <div class="margin-top-4">
             <p class="margin-y-05">
             <strong>To:</strong> <%= message.to %>
             </p>
@@ -26,24 +26,6 @@
           </div>
         <% end %>
       </div>
-
-      <div class="tablet:grid-col-6">
-        <h2>Calls</h2>
-
-        <% @calls.each do |call| %>
-          <div class="lg-card margin-bottom-4">
-            <p class="margin-y-05">
-            <strong>To:</strong> <%= call.to %>
-            </p>
-            <p class="margin-y-05">
-            <strong>Body:</strong> <%= call.body %>
-            </p>
-            <p class="margin-y-05">
-            <strong>Sent at:</strong> <%= call.sent_at.strftime(t('time.formats.event_timestamp')) %>
-            </p>
-          </div>
-        <% end %>
-      </div>
     </div>
-  </div>
+  <% end %>
 </div>