Update ContestPage tabs and styling for mobile responsiveness

hicommonwealth · Feb 11, 2025 · bf918cd · bf918cd
1 parent b6697d5
commit bf918cd
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 9 deletions.
diff --git a/packages/commonwealth/client/scripts/views/pages/ContestPage/NewContestPage.scss b/packages/commonwealth/client/scripts/views/pages/ContestPage/NewContestPage.scss
@@ -6,6 +6,10 @@
     flex-direction: column;
     gap: 16px;
 
+    .ContestCard {
+      max-width: 100%;
+    }
+
     .navigation-buttons {
       display: flex;
       gap: 12px;
@@ -37,6 +41,10 @@
     display: none;
   }
 
+  .mobile-tabs {
+    margin-top: 16px;
+  }
+
   @include extraSmall {
     .top-container {
       .navigation-buttons {

diff --git a/packages/commonwealth/client/scripts/views/pages/ContestPage/tabs/Entries/EntriesTab.scss b/packages/commonwealth/client/scripts/views/pages/ContestPage/tabs/Entries/EntriesTab.scss
@@ -1,4 +1,3 @@
 .EntriesTab {
-  width: 100%;
-  padding: 24px;
+  padding-block: 16px;
 }
diff --git a/packages/commonwealth/client/scripts/views/pages/ContestPage/tabs/Entries/EntriesTab.tsx b/packages/commonwealth/client/scripts/views/pages/ContestPage/tabs/Entries/EntriesTab.tsx
@@ -9,7 +9,7 @@ const EntriesTab = () => {
       <CWText type="h3" fontWeight="semiBold">
         Entries
       </CWText>
-      {/* Add entries content here */}
+      Entries component here
     </div>
   );
 };

diff --git a/...es/commonwealth/client/scripts/views/pages/ContestPage/tabs/PriceChart/PriceChartTab.scss b/...es/commonwealth/client/scripts/views/pages/ContestPage/tabs/PriceChart/PriceChartTab.scss
@@ -1,4 +1,3 @@
 .PriceChartTab {
-  width: 100%;
-  padding: 24px;
+  padding-block: 16px;
 }
diff --git a/...ges/commonwealth/client/scripts/views/pages/ContestPage/tabs/PriceChart/PriceChartTab.tsx b/...ges/commonwealth/client/scripts/views/pages/ContestPage/tabs/PriceChart/PriceChartTab.tsx
@@ -9,7 +9,7 @@ const PriceChartTab = () => {
       <CWText type="h3" fontWeight="semiBold">
         Price Chart
       </CWText>
-      {/* Add price chart content here */}
+      Price Chart component here
     </div>
   );
 };

diff --git a/...ages/commonwealth/client/scripts/views/pages/ContestPage/tabs/TokenSwap/TokenSwapTab.scss b/...ages/commonwealth/client/scripts/views/pages/ContestPage/tabs/TokenSwap/TokenSwapTab.scss
@@ -1,4 +1,3 @@
 .TokenSwapTab {
-  width: 100%;
-  padding: 24px;
+  padding-block: 16px;
 }
diff --git a/packages/commonwealth/client/scripts/views/pages/ContestPage/tabs/TokenSwap/TokenSwapTab.tsx b/packages/commonwealth/client/scripts/views/pages/ContestPage/tabs/TokenSwap/TokenSwapTab.tsx
@@ -9,7 +9,7 @@ const TokenSwapTab = () => {
       <CWText type="h3" fontWeight="semiBold">
         Token Swap
       </CWText>
-      {/* Add token swap content here */}
+      Token Swap component here
     </div>
   );
 };