diff --git a/src/app/app.component.html b/src/app/app.component.html
index 24cf52ab37f82d06deef3ebaa424aad08fa1883c..f2863b8e4cdfe3487b6b04c8626fa864f7f60cb9 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -11,7 +11,7 @@
     <!-- calculators list as a dropdown menu-->
     <div [hidden]="tabsFitInNavbar" id="dropdown-calc-container">
 
-        <button *ngIf="! currentCalc" mat-button [matMenuTriggerFor]="menu" color="primary" class="calculators-menu-title">
+        <button *ngIf="! currentCalc" mat-button [matMenuTriggerFor]="menu" color="primary" class="calculators-menu-title no-calc-type">
           <mat-icon class="dropdown-icon">arrow_drop_down</mat-icon>
           <span class="calc-name">
             {{ uitextSelectCalc }}
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 71b9520095a9a566ee268f7de73f58a7a3c23483..cc1ce2441f35ea1f8d359b038ec1d734bb42dcc8 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -129,19 +129,35 @@ button:focus {
 
 .calculators-menu-title {
     background-color: rgb(250, 250, 250);
-    margin-top: 8px;
+    // margin-top: 8px;
+    margin-top: 14px;
+    height: 38px;
+
     width: 100%; // adapts to small screens
-    max-width: 400px;
+    max-width: 248px; // designed for 360px displays
 
     .dropdown-icon {
         float: right;
         transform: scale(2);
-        margin-top: 8px;
+        margin-top: 6px;
         margin-left: 10px;
     }
 
+    .calc-name {
+        line-height: 24px;
+    }
+
     .calc-type {
         color: #777;
+        line-height: 34px;
+    }
+
+    &.no-calc-type {
+        margin-top: 1px;
+
+        .dropdown-icon {
+            margin-top: 0;
+        }
     }
 }