update rack view code

resources/assets/sass/app.scss

@@ -48,4 +48,6 @@ nav.navbar {
 pre code {
     font-size: 87.5%;
     overflow: hidden;
-}
\ No newline at end of file
+}
+
+@import "rack.scss";
\ No newline at end of file

resources/assets/sass/rack.scss

+div.rack-container {
+    position: relative; 
+    padding-bottom: 0rem; 
+    border-bottom: 1px solid gray;
+    box-shadow: 0 10px 5px -5px rgba(0, 0, 0, 0.2);
+}
+
+div.rack {
+    position: relative;
+    display: inline;
+    width: 300px; 
+    border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+div.server {
+    position: absolute;
+    width: 100%;
+
+    padding: 0.2rem;
+
+    display: flex;
+    flex-direction: column;
+    word-wrap: break-word;
+    background-color: white;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+div.slot {
+    position: absolute;
+    width: 100%;
+    height: 2rem;
+
+    padding: 0.2rem;
+
+    display: flex;
+    flex-direction: column;
+    word-wrap: break-word;
+    background-color: rgba(0, 0, 0, 0.01);
+    border: 1px solid rgba(0, 0, 0, 0.05);
+
+    color: rgba(0, 0, 0, 0.2);
+}
+
+// max rack (or server)) size should be 50u ...
+@for $size from 1 through 50 {
+    div.size-#{$size}u {
+        height: #{$size * 2}rem;
+    }
+}
\ No newline at end of file

resources/views/organization/rack.blade.php

 @extends('layouts.app')
 
 @section('content')
-<style>
-    div.rack {
-        position: relative; 
-        width: 100%; 
-        border: 1px solid rgba(0, 0, 0, 0.1);
-    }
-    
-    div.server {
-        position: absolute;
-        width: 100%;
-        
-        padding: 0.2rem;
-        
-        display: flex;
-        flex-direction: column;
-        word-wrap: break-word;
-        background-color: white;
-        border: 1px solid rgba(0, 0, 0, 0.1);
-    }
-    
-    div.size-1u {
-        height: 2rem;
-    }
-    
-    div.size-2u {
-        height: 4rem;
-    }
-    
-    div.size-3u {
-        height: 6rem;
-    }
-    
-    div.size-4u {
-        height: 8rem;
-    }
-    
-    div.size-48u {
-        height: 96rem
-    }
-    
-    div.size-42u {
-        height: 84rem
-    }
-    
-    div.slot {
-        position: absolute;
-        width: 100%;
-        height: 2rem;
-        
-        padding: 0.2rem;
-        
-        display: flex;
-        flex-direction: column;
-        word-wrap: break-word;
-        background-color: rgba(0, 0, 0, 0.01);
-        border: 1px solid rgba(0, 0, 0, 0.05);
-        
-        color: rgba(0, 0, 0, 0.2);
-    }
-</style>
+<div class="container-fluid pb-4">
+    
+    <div class="rack-container">
+        <div class="rack size-42u">
+            @for ($i = 0; $i < 42; $i++)
+            <div class="slot" style="bottom: {{ 2*$i }}rem">
+                {{ $i + 1 }}
+            </div>
+            @endfor
 
-<div class="container">
-    <div class="rack size-42u">
-        @for ($i = 0; $i < 42; $i++)
-        <div class="slot" style="bottom: {{ 2*$i }}rem">
-            {{ $i + 1 }}
+            @foreach ($organization->servers as $server)
+            @if ($server->size == 0)
+                @continue
+            @endif
+            <div class="server size-{{ $server->size }}u"
+                 style="bottom: {{ 2*($server->position - 1) }}rem;">
+                <p>
+                    <a href="{{ $server->getUrlAttribute() }}"
+                       class="text-decoration-none">
+                        {{ $server->name }}
+                    </a>
+                    {!! $server->status()->badge() !!}
+                </p>
+            </div>
+            @endforeach
         </div>
-        @endfor
         
-        @foreach ($organization->servers as $server)
-        @if ($server->size == 0)
-            @continue
-        @endif
-        <div class="server size-{{ $server->size }}u"
-             style="bottom: {{ 2*($server->position - 1) }}rem;">
-            <p>
-                <a href="{{ $server->getUrlAttribute() }}"
-                   class="text-decoration-none">
-                    {{ $server->name }}
-                </a>
-                {!! $server->status()->badge() !!}
-            </p>
+        <div class="rack size-12u">
+            @for ($i = 0; $i < 12; $i++)
+            <div class="slot" style="bottom: {{ 2*$i }}rem">
+                {{ $i + 1 }}
+            </div>
+            @endfor
         </div>
-        @endforeach
     </div>
 
 </div>