all responsivity issues fixed

frontend/src/App.css

@@ -21,7 +21,6 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
   text-align: left;
   font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-size: 16px;
-  min-width: 1318px;
 }
 
 .App-no-telemetry {
@@ -42,7 +41,6 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 @media (max-width: 900px) {
   .App {
     font-size: 12px;
-    min-width: 390px;
     max-width: 500px;
   }
 }

frontend/src/App.tsx

@@ -144,7 +144,7 @@ export default class App extends React.Component {
 
     Ago.timeDiff = timeDiff;
     //ICI
-    if (chains.length === 0) {
+    if (chains.length === 1) {
       return (
         <div className="App App-no-telemetry">
           <OfflineIndicator status={status} />

frontend/src/components/Chain/Chain.css

@@ -32,19 +32,20 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
   display: flex;
   justify-content: center;
   align-items: center;
+  margin-bottom: 20px;
 }
 
 .Chain-content {
-  min-height: 50vh;
+  height: 100%;
   color: #000;
   background-color: #fff;
   border-radius: 10px;
-  margin: 0px 8%;
   box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
 }
 
 @media (max-width: 900px) {
   .Chain-content-container {
-    top: 270px;
+    top: 230px;
+    padding: 20px;
   }
 }

frontend/src/components/Chain/Header.css

@@ -1,10 +1,8 @@
 .Header {
-  width: 100%;
   color: #000;
-  min-width: 1350px;
   display: flex;
   flex-direction: column;
-  padding: 20px 10%;
+  padding: 20px 0px;
 }
 
 .Image-row {
@@ -95,23 +93,19 @@
 
 .button-outline {
   background-color: white;
-  /* default background color */
   border: none;
   box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
-  /* example shadow */
   color: black;
-  /* default text color */
   font-size: 16px;
-  /* assuming 'm' size is 16px */
   font-weight: 400;
-  /* assuming 'normal' weight is 400 */
   padding: 12px 24px;
-  /* assuming '3xs' and 's' spacings */
   border-radius: 5px;
-  /* assuming 'm' radius is 8px */
   cursor: pointer;
   transition: all 0.2s ease-in-out;
   margin: 2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .button-outline:hover {
@@ -138,28 +132,27 @@
 
 @media (max-width: 900px) {
   .Header {
-    min-width: 100%;
     padding: 0px;
   }
   .Header-top-row {
     padding: 20px;
-    gap: 50px;
+    gap: 0px;
   }
   .Header-row-first {
     min-width: 100%;
     margin: 0px;
-    padding: 0px;
+    padding: 0px 20px;
   }
   .ImageIcon {
     width: 40px;
     height: 40px;
   }
   .button-outline {
-    padding: 5px 5px;
+    padding: 10px 15px;
     font-size: 10px;
   }
   .text-sm {
-    font-size: 8px;
+    font-size: 5px;
   }
   .Header-row-second {
     width: 100%;

frontend/src/components/Chain/Header.tsx

@@ -24,7 +24,7 @@ import blockIcon from '../../icons/blockchain-icon.svg';
 import finalizedIcon from '../../icons/distribute-icon.svg';
 import blockTimeIcon from '../../icons/stopwatch-icon.svg';
 import lastTimeIcon from '../../icons/timer.svg';
-import deoxysImg from '../../assets/deoxys.png';
+import StarknetImg from '../../assets/starknet.png';
 
 import './Header.css';
 
@@ -70,35 +70,37 @@ export class Header extends React.Component<
       <div className="Header">
         <div className="Header-top-row">
           <div className="Image-row">
-            <img src={deoxysImg} alt="Deoxys" className="ImageIcon" />
+            <img src={StarknetImg} alt="Deoxys" className="ImageIcon" />
             <div className="Column-image">
-              <p className="text-bold gradient-text">Deoxys</p>
-              <p className="text-gray text-sm">v0.1.0-alpha</p>
+              <p className="text-bold gradient-text">Starknet</p>
+              <p className="text-gray text-sm">v0.13.1 (JSON-RPC v0.7.1)</p>
               <p className="text-gray text-sm">Starknet Mainnet</p>
             </div>
           </div>
           <div className="Row-icons">
             <button
               className="button-outline text-bold"
-              onClick={() => window.open('https://github.com/KasarLabs/deoxys')}
+              onClick={() =>
+                window.open('https://deoxys.kasar.io/get_started/install')
+              }
             >
               Run
             </button>
             <button
               className="button-outline text-bold"
-              onClick={() => window.open('https://twitter.com/kasarlabs')}
+              onClick={() => window.open('https://deoxys.kasar.io/')}
             >
               Docs
             </button>
             <button
               className="button-outline text-bold"
-              onClick={() => window.open('https://deoxys-docs.kasar.io')}
+              onClick={() => window.open('https://t.me/kasarlabs')}
             >
               Help
             </button>
             <button
               className="button-outline text-bold"
-              onClick={() => window.open('https://t.me/kasarlabs')}
+              onClick={() => window.open('https://github.com/kasarlabs/deoxys')}
             >
               Github
             </button>

frontend/src/components/List/THead.css

@@ -24,11 +24,13 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 .THeadCell {
   text-align: left;
+  width: 120px;
   padding: 0px 13px;
 }
 
 .THeadCell-sortable {
   cursor: pointer;
+  width: 120px;
 }
 
 .THeadCell-sorted {

frontend/src/components/Settings/Settings.css

@@ -18,14 +18,13 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 .Settings {
   text-align: center;
-  padding-top: 50px;
   width: 100%;
 }
 
 .Settings-category {
   text-align: left;
   margin: 0 auto;
-  padding: 2em 20px;
+  padding: 0px 20px;
   min-width: 700px;
 }
 

frontend/src/components/Tile.css

@@ -70,8 +70,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 @media (max-width: 900px) {
   .Tile {
     font-size: 10px; /* Increased text size */
-    padding: 10px 0px;
-    margin: 10px;
+    padding: 0px;
+    margin: 10px 0px;
   }
   .Tile-label {
     background-color: transparent;
@@ -81,4 +81,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
     color: black;
     letter-spacing: 0px;
   }
+  .Tile-content {
+    font-size: 10px; /* Increased text size */
+  }
 }