From 44990abd68892a2650c565ba99f094871ae393d3 Mon Sep 17 00:00:00 2001
From: Sorrel Bri <sorrel.bri.june@gmail.com>
Date: Wed, 26 Feb 2020 16:48:50 -0800
Subject: [PATCH] style global padding and improve margin around components

---
 src/PhonoChangeApplier.scss  | 7 ++++---
 src/components/Features.scss | 3 +--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/PhonoChangeApplier.scss b/src/PhonoChangeApplier.scss
index 38cf11c..4fd7e32 100644
--- a/src/PhonoChangeApplier.scss
+++ b/src/PhonoChangeApplier.scss
@@ -1,7 +1,8 @@
 div.App {
-  height: 100vh;
-  width: 100vw;
+  max-height: 100vh;
+  max-width: 100vw;
   line-height: 1.25em;
+  padding: 1em;
 
   h1 {
     font-size: 2em;
@@ -27,7 +28,7 @@ div.App {
     grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));
     
     div {
-      width: 100%;
+      max-width: 100%;
       max-height: 85vh;
       margin: 1em;
       overflow-y: scroll;
diff --git a/src/components/Features.scss b/src/components/Features.scss
index beb3fcf..3957e03 100644
--- a/src/components/Features.scss
+++ b/src/components/Features.scss
@@ -1,5 +1,4 @@
 div.Features {
-  max-width: 85%;
 
   ul.Features__list li {
     display: grid;
@@ -7,7 +6,7 @@ div.Features {
 
     span.feature--names-and-phones {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+      grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
     }
 
     span.feature-name {