Reduce X padding on small breakpoint

website/src/app/commodities/commodities.component.html

@@ -1,7 +1,7 @@
 <app-navbar></app-navbar>
 
 
-<div class="container mx-auto bg-black bg-opacity-80 text-white text-opacity-80 p-10 my-10 space-y-10">
+<div class="container mx-auto bg-black bg-opacity-80 text-white text-opacity-80 px-5 md:px-10 py-10 my-10 space-y-10">
 
   <div *ngFor="let c of commodityList" class="">
     <div class="flex items-baseline border-b mb-2">
@@ -13,7 +13,7 @@
       </div>
     </div>
 
-    <div class="flex">
+    <div class="flex overflow-auto">
       <div class="flex-1">
         <div class="text-lg mb-1">Sold at</div>
         <table class="w-full table-fixed">

website/src/app/compare-items-page/compare-items-page.component.html

@@ -1,6 +1,6 @@
 <app-navbar></app-navbar>
 
-<div class="w-fit mx-auto p-10 mt-10 bg-black bg-opacity-80">
+<div class="w-fit mx-auto px-5 md:px-10 py-10 mt-10 bg-black bg-opacity-80">
 
   <table>
     <ng-container *ngFor="let g of fields; index as gIndex">

website/src/app/compare-ships-page/compare-ships-page.component.html

@@ -1,6 +1,6 @@
 <app-navbar></app-navbar>
 
-<div class="w-fit mx-auto p-10 mt-10 bg-black bg-opacity-80">
+<div class="w-fit mx-auto px-5 md:px-10 py-10 mt-10 bg-black bg-opacity-80">
 
   <table>
     <ng-container *ngFor="let g of fields; index as gIndex">

website/src/app/fps-weapons-page/fps-weapons-page.component.html

@@ -6,7 +6,7 @@
   </nav>
 </div>
 
-<div class="container mx-auto bg-black bg-opacity-80 text-white text-opacity-80 p-10 my-10">
+<div class="container mx-auto bg-black bg-opacity-80 text-white text-opacity-80 px-5 md:px-10 py-10 my-10">
 
   <div *ngIf="selectedType" class="grid lg:grid-cols-4 gap-10">
 

website/src/app/home-page/home-page.component.html

@@ -1,6 +1,6 @@
 <app-navbar></app-navbar>
 
-<div class="container mx-auto max-w-7xl p-10 mt-10 bg-black bg-opacity-80 hidden">
+<div class="container mx-auto max-w-7xl px-5 md:px-10 py-10 mt-10 bg-black bg-opacity-80 hidden">
 
   <h4 class="text-2xl">
     Welcome to Star Citizen® Unpacked!
@@ -26,7 +26,7 @@ <h4 class="text-2xl">
 
 </div>
 
-<div class="container mx-auto max-w-7xl p-10 mt-10 bg-black bg-opacity-80">
+<div class="container mx-auto max-w-7xl p-10 mt-10 sm:mb-56 bg-black bg-opacity-80">
 
   <h2 class="text-2xl">Latest updates</h2>
 

website/src/app/home-page/home-page.component.scss

@@ -39,7 +39,7 @@
   }
 }
 
-@media (max-width: 767px) {
+@media (max-width: 640px) {
   .credits {
     flex-direction: column;
     position: relative;

website/src/app/item-page/item-page.component.html

@@ -1,6 +1,6 @@
 <app-navbar></app-navbar>
 
-<div class="container mx-auto bg-black bg-opacity-80 text-white text-opacity-80 p-10 my-10">
+<div class="container mx-auto bg-black bg-opacity-80 text-white text-opacity-80 px-5 md:px-10 py-10 my-10">
 
   <div class="flex">
     <div class="flex-grow">

website/src/app/itemgroup/itemgroup.component.html

@@ -4,13 +4,13 @@ <h4 class="text-xl mt-4">{{groupName}}</h4>
 
   <ng-container *ngFor="let class of groupItems | keyvalue">
 
-    <div (click)="toggleItems(class.key)" class="flex border-gray-600 border-b last:border-b-0 cursor-pointer items-center pl-4">
+    <div (click)="toggleItems(class.key)" class="flex flex-col md:flex-row border-gray-600 border-b last:border-b-0 cursor-pointer items-center">
 
       <!-- Item group name -->
-      <div class="flex-grow font-bold">{{class.key}}</div>
+      <div class="flex-grow md:pl-4 font-bold">{{class.key}}</div>
 
       <!-- Size boxes -->
-      <div class="flex-shrink-0 flex">
+      <div class="flex-shrink-0 flex overflow-auto w-full md:w-auto">
         <div *ngFor="let size of class.value.bySize; let s = index" class="size-box border-gray-600 border-l">
           <div *ngIf="size.length" class="size-box-inner bg-primary">
             <span class="text-xs text-white text-opacity-80">S{{s}}</span><br>

website/src/app/itemlist-page/itemlist-page.component.html

@@ -6,7 +6,7 @@
   </nav>
 </div>
 
-<div class="container mx-auto bg-black bg-opacity-80 text-white text-opacity-80 p-10 my-10">
+<div class="container mx-auto bg-black bg-opacity-80 text-white text-opacity-80 px-5 md:px-10 py-10 my-10">
 
   <div *ngIf="selectedType" class="grid lg:grid-cols-4 gap-10">
 

website/src/app/itemport/itemport.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="itemPort.Category !== 'Weapon attachments'" class="flex items-center">
+<div *ngIf="itemPort.Category !== 'Weapon attachments'" class="flex items-center overflow-auto whitespace-nowrap md:whitespace-normal">
 
   <!-- Size box -->
   <div class="size-box-inner flex-shrink-0 flex items-center justify-center w-8 h-8 my-2 mr-4 text-xs" [class.bg-primary]="itemPort.InstalledItem" [class.bg-gray-900]="!itemPort.InstalledItem">

website/src/app/navbar/navbar.component.html

@@ -1,15 +1,15 @@
-<nav class="bg-black bg-opacity-60">
+<nav class="bg-gray-800 border-b border-gray-700 border-opacity-50">
 
-  <div class="container overflow-auto mx-auto px-5 py-3 flex lg:flex-row items-baseline text-gray-400 space-x-5">
-    <a class="text-xl text-primary smallcaps text-shadow-sm" routerLink="/">SCunpacked</a>
-    <a class="hover:text-white" routerLink="/ships" routerLinkActive="text-white">Ships</a>
-    <a class="hover:text-white" routerLink="/items" routerLinkActive="text-white">Ship equipment</a>
-    <a class="hover:text-white" routerLink="/fps-weapons" routerLinkActive="text-white">FPS gear</a>
-    <a class="hover:text-white" routerLink="/shops" routerLinkActive="text-white">Shops</a>
-    <a class="hover:text-white" routerLink="/commodities" routerLinkActive="text-white">Commodities</a>
+  <div class="xl:container px-1 whitespace-nowrap overflow-auto xl:mx-auto flex lg:flex-row items-baseline text-sm text-gray-400 font-medium">
+    <a class="mr-1 px-3 py-3 uppercase leading-6 tracking-wide" routerLink="/"><span class="font-bold text-gray-200">SC</span><span>unpacked</span></a>
+    <a class="px-2 py-3 hover:text-white" routerLink="/ships" routerLinkActive="text-white">Ships</a>
+    <a class="px-2 py-3 hover:text-white" routerLink="/items" routerLinkActive="text-white">Ship equipment</a>
+    <a class="px-2 py-3 hover:text-white" routerLink="/fps-weapons" routerLinkActive="text-white">FPS gear</a>
+    <a class="px-2 py-3 hover:text-white" routerLink="/shops" routerLinkActive="text-white">Shops</a>
+    <a class="px-2 py-3 hover:text-white" routerLink="/commodities" routerLinkActive="text-white">Commodities</a>
     <span class="flex-grow"></span>
-    <span class=""><a href="https://github.com/richardthombs/scunpacked"><i class="fab fa-lg fa-github hover:text-white"></i></a></span>
-    <span class="smallcaps">v3.12.0a LIVE</span>
+    <span class=""><a class="px-2 py-3" href="https://github.com/richardthombs/scunpacked"><i class="fab fa-lg fa-github hover:text-white"></i></a></span>
+    <span class="px-2 smallcaps">v3.12.0a LIVE</span>
   </div>
 
 </nav>

website/src/app/ship-page/ship-page.component.html

@@ -1,6 +1,6 @@
 <app-navbar></app-navbar>
 
-<div class="container mx-auto bg-black bg-opacity-80 text-white text-opacity-80 p-10 my-10">
+<div class="container mx-auto bg-black bg-opacity-80 text-white text-opacity-80 px-5 md:px-10 py-10 my-10">
   <div class="flex">
     <div class="flex-grow">
       <h1 class="text-2xl">{{ship?.Name || ship?.ClassName}}</h1>

website/src/app/shiplist-page/shiplist-page.component.html

@@ -6,7 +6,7 @@
   </nav>
 </div>
 
-<div class="container mx-auto bg-black bg-opacity-80 text-white text-opacity-80 p-10 my-10">
+<div class="container mx-auto bg-black bg-opacity-80 text-white text-opacity-80 px-5 md:px-10 py-10 my-10">
 
   <div *ngIf="selectedRole">