Webpage Layout issue resolved #35

webapp/src/components/Breakpoint/Breakpoint.css

@@ -3,8 +3,12 @@
   flex-direction: column;
   align-items: flex-start;
   gap: 10px;
+  position: relative;
+  top: -100px;
 }
 .add-breakpoint {
+  position: absolute;
+  right:-400px;
   display: flex;
   padding: 6px 12px;
   align-items: flex-start;
@@ -13,16 +17,20 @@
 }
 
 .lower-breakpoint {
+  position: absolute; /* Make it independent of other components */
+  right: -460px; /* Adjust this value for desired placement */
+  top: 50px; /* Adjust this to control vertical positioning */
   display: flex;
   height: 177px;
   padding: 7px 10px;
   flex-direction: column;
   align-items: flex-start;
   gap: 9px;
   border: 1px solid var(--Gray-2, #4f4f4f);
-  /* background: #1e1e1e; */
+  margin-top: 0; /* Disable margin if using absolute positioning */
 }
 
+
 .line-breakpoint {
   display: flex;
   align-items: center;
@@ -38,3 +46,20 @@
   border-radius: 2px;
   background: var(--primary-orange, #e88f40);
 }
+
+
+/* Media Query for screens smaller than 768px */
+@media (max-width: 768px) {
+
+  .add-breakpoint {
+    position: static; /* Remove absolute positioning for natural stacking */
+    width: auto; /* Adjust width to content size */
+    align-self: center; /* Center the button in the layout */
+  }
+
+  .lower-breakpoint {
+    position: static; /* Remove absolute positioning for stacking */
+    width: auto; /* Adjust width to fit content */
+    align-self: center; /* Center the element in the layout */
+  }
+}

webapp/src/components/Breakpoint/Breakpoint.jsx

@@ -56,7 +56,7 @@ const Breakpoint = () => {
             onChange={(e) => setBreakFunction(e.target.value)}
           />
         </div>
-        <button className="save-button" onClick={handleBreakSave}>
+        <button className="add-button" onClick={handleBreakSave}>
           Add
         </button>
       </div>

webapp/src/components/DebugHeader/DebugHeader.css

@@ -28,11 +28,15 @@ body {
 }
 .debug-header {
   display: flex;
-  width: 90vw;
   padding: 10px;
   justify-content: space-between;
   align-items: center;
-  background: var(--Gray-1, #333);
+  background: var(--Gray-1, #050505);
+  position: relative;
+  top: 15px;
+  width:100%;
+  margin-left: 0px;
+  margin-right: 10px;
 }
 [data-theme="light"] .debug-header {
   background-color: var(--component-light-background);
@@ -47,7 +51,9 @@ body {
   border-radius: 42px;
   background: var(--Gray-2, #4f4f4f);
   box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05) inset;
+  margin-left: -260px; /* Adjust the value as needed */
 }
+
 .filename-content {
   color: #fff;
   font-family: Montserrat;
@@ -90,10 +96,46 @@ body {
 
 .save-button {
   display: flex;
-  padding: 4px 8px;
+  padding: 10px 20px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 2px;
+  background: var(--primary-orange, #e88f40);
+  margin-left: -102px;
+  border: 2px solid #e88f40;
+
+}
+
+.add-button {
+  display: flex;
+  padding: 10px 20px;
   justify-content: center;
   align-items: center;
   gap: 10px;
   border-radius: 2px;
   background: var(--primary-orange, #e88f40);
+  margin-left: -102px;
+  border: -10px solid #e88f40;
+  position: relative;
+  right: -100px;
 }
+
+@media (max-width: 480px) {
+  .debug-header {
+    padding: 5px;
+  }
+
+  .filename {
+    padding: 4px 10px;
+  }
+
+  .icons, .arrows, .others {
+    flex-direction: column;
+    gap: 5px;
+  }
+
+  .save-button, .add-button {
+    padding: 5px 10px;
+  }
+}

webapp/src/components/Footer/Footer.css

@@ -2,7 +2,10 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-top: 30px;
+  margin-top: 200px;
+  margin-right: -7px;
+  margin-left: -7px;
+  margin-bottom: -7px;
   background-color: var(--footer-background-color);
   color: var(--footer-color); /* If you want to set text color */
 }

webapp/src/components/Functions/Functions.css

@@ -1,28 +1,30 @@
 .functions-parent {
   display: flex;
-  height: 100vh;
-  padding: 10px;
+  height: 80vh;
+  padding: 0px;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   border: 1px solid var(--Gray-2, #4f4f4f);
-
+  margin-right: 60px;
+  transform: scale(0.9);
   /* background: #1e1e1e; */
 }
 .functions-heading {
   display: flex;
-  width: 302px;
+  width: 189px;
   padding: 6px 12px;
   justify-content: center;
   align-items: center;
   gap: 10px;
   background: var(--primary-orange, #e88f40);
+  margin-top: 10px;
 }
 .functions {
   /* width: 100%; */
   display: flex;
   padding: 10px;
-  height: 87vh;
+  height: 60vh;
   max-width: 20vw;
   flex-direction: column;
   align-items: flex-start;

webapp/src/components/FunctionsBottom/FunctionsBottom.css

@@ -4,6 +4,8 @@
   gap: 10px;
   border: 1px solid var(--Gray-2, #4f4f4f);
   padding: 10px 10px 10px 10px;
+  transform: scale(0.8) translate(-37px, -50px);
+ /* Move 50px left and 20px up */
 }
 .function-bottom-heading {
   display: flex;

webapp/src/components/GdbComponents/GdbComponents.css

@@ -4,6 +4,10 @@
   align-items: flex-start;
   gap: 10px;
   width: 42vw;
+  margin-bottom: -100px;
+  position: relative;
+  top: -90px;
+
 }
 
 .gdb-header {
@@ -32,3 +36,12 @@
   font-weight: bold;
   background: var(--primary-orange, #e88f40);
 }
+
+@media (max-width: 768px) {
+  .gdb-components {
+    flex-direction: column; /* Stack items vertically */
+    align-items: center; /* Center items for small screens */
+    gap: 20px; /* Add spacing between elements */
+    width: auto; /* Adjust width to fit smaller screens */
+  }
+}

webapp/src/components/Stack/Stack.css

@@ -1,13 +1,14 @@
 .stack-parent {
   display: flex;
-  height: 90vh;
-  width: 210px;
-  padding: 10px;
+  height: 80vh;
+  padding: 0px;
   flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  gap: 12px;
+  align-items: center;
+  gap: 10px;
   border: 1px solid #4f4f4f;
+  margin-right: 40px;
+  transform: scale(0.9);
+
   /* background: #1e1e1e; */
 }
 
@@ -24,12 +25,12 @@
 .stack {
   display: flex;
   width: 189px;
-  height: 100%;
-  padding: 10px;
+  height: 60vh;
+  padding: 10px 10px 10px 10px;
   flex-direction: column;
   align-items: flex-start;
   gap: 11px;
   border: 1px solid var(--Gray-2, #4f4f4f);
-
   overflow-y: scroll;
+
 }

webapp/src/components/StackBottom/StackBottom.css

@@ -1,18 +1,20 @@
 .stackbottom-container {
   display: flex;
-  width: 190px;
-  height: 159px;
+  width: 321px;
+  height: 84px;
   padding: 15px 20px;
   flex-direction: column;
-  align-items: flex-start;
   gap: 10px;
   border: 1px solid var(--Gray-2, #4f4f4f);
+  transform: scale(0.8) translate(-30px, -50px);
+  align-items: center;
   /* background: #1e1e1e; */
 }
 .stackbottom-maincomponent {
   overflow-x: scroll;
   width: 190px;
   height: 139px;
+
 }
 .stackbottom-heading {
   display: flex;

webapp/src/components/Terminal/Terminal.css

@@ -1,8 +1,8 @@
 .terminal {
   width: 55vw;
-  height: 234px;
+  height: 305px;
   flex-shrink: 0;
-  padding-left: 30px;
-  padding-right: 30px;
-  padding-bottom: 50px;
+  padding-left: 0px;
+  padding-right: 00px;
+  padding-bottom: 00px;
 }

webapp/src/index.css

@@ -9,7 +9,7 @@
   --text-rendering: optimizeLegibility;
   --webkit-font-smoothing: antialiased;
   --moz-osx-font-smoothing: grayscale;
-  --padding: 0 20px;
+  --padding: 0 0px;
   --footer-background-color: rgb(2, 12, 22);
   --footer-light-background: #ffffff;
   --footer-light-color: rgba(0, 0, 0, 0.87);
@@ -40,4 +40,7 @@ body {
   -webkit-font-smoothing: var(--webkit-font-smoothing);
   -moz-osx-font-smoothing: var(--moz-osx-font-smoothing);
   padding: var(--padding);
+  overflow-x: hidden !important;
+  height: 100%; /* Ensure the body takes up the full height of the viewport */
+  margin: 0 0 0 10px;
 }