fix: resolve alignment issues (#649) (#656)

* fix:graph/desc collapse as well alignment issues * fixed breakpoints
hypertrons · Apr 20, 2023 · e247087 · e247087
1 parent 974517b
commit e247087
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 18 deletions.
diff --git a/src/pages/ContentScripts/features/developer-networks/view.tsx b/src/pages/ContentScripts/features/developer-networks/view.tsx
@@ -141,26 +141,23 @@ const View = ({
                 settings.locale
               )}
             </span>
-            <div className="hypertrons-crx-title-extra">
+            <div className="hypertrons-crx-title-extra developer-tab">
               {getMessageByLocale('global_period', settings.locale)}:{' '}
               {REPO_PERIOD} {getMessageByLocale('global_day', settings.locale)}
             </div>
           </div>
-          <div className="d-flex flex-wrap flex-items-center">
-            <div className="col-12 col-md-8">
-              <div style={{ margin: '10px 0 20px 20px' }}>
+          <div className="d-flex flex-wrap justify-content-lg-between align-items-center">
+            <div className="col-8 graph-container">
+              <div style={{ margin: '15px 0 20px 0px' }}>
                 <Graph
                   data={developerNetwork}
                   style={GRAPH_STYLE}
                   focusedNodeID={currentDeveloper}
                 />
               </div>
             </div>
-            <div className="col-12 col-md-4">
-              <div
-                className="color-text-secondary"
-                style={{ marginLeft: '35px', marginRight: '35px' }}
-              >
+            <div className="col-4 description-container">
+              <div className="color-text-secondary developer-tab">
                 <p>
                   {getMessageByLocale(
                     'component_developerCollaborationNetwork_description',
@@ -210,17 +207,14 @@ const View = ({
               {getMessageByLocale('global_day', settings.locale)}
             </div>
           </div>
-          <div className="d-flex flex-wrap flex-items-center">
-            <div className="col-12 col-md-8">
-              <div style={{ margin: '10px 0 20px 20px' }}>
+          <div className="d-flex flex-wrap justify-content-lg-between align-items-center">
+            <div className="col-lg-8 col-12 graph-container">
+              <div style={{ margin: '15px 0px 20px 0px' }}>
                 <Graph data={repoNetwork} style={GRAPH_STYLE} />
               </div>
             </div>
-            <div className="col-12 col-md-4">
-              <div
-                className="color-text-secondary"
-                style={{ marginLeft: '35px', marginRight: '35px' }}
-              >
+            <div className="col-lg-4 col-12 description-container">
+              <div className="color-text-secondary">
                 <p>
                   {getMessageByLocale(
                     'component_mostParticipatedProjects_description',

diff --git a/src/pages/ContentScripts/features/perceptor-tab/index.tsx b/src/pages/ContentScripts/features/perceptor-tab/index.tsx
@@ -20,7 +20,7 @@ const addPerceptorTab = async (): Promise<void | false> => {
   }
   const perceptorTab = insightsTab.cloneNode(true) as HTMLAnchorElement;
   delete perceptorTab.dataset.selectedLinks;
-  perceptorTab.removeAttribute('aria-current')
+  perceptorTab.removeAttribute('aria-current');
   perceptorTab.classList.remove('selected');
   const perceptorHref = `${insightsTab.href}?redirect=perceptor`;
   perceptorTab.href = perceptorHref;

diff --git a/src/pages/ContentScripts/index.scss b/src/pages/ContentScripts/index.scss
@@ -21,13 +21,36 @@
   border-bottom: 0;
   border-radius: 6px;
 }
+.color-text-secondary {
+  margin-left: 35px;
+  margin-right: 35px;
+  margin-top: 10px;
+}
+@media screen and (max-width: 1120px) {
+  .graph-container {
+    width: 100% !important;
+  }
+  .description-container {
+    width: 100% !important;
+  }
+  .color-text-secondary {
+    margin-left: 5px;
+    margin-top: 5px;
+  }
+}
 
 .hypertrons-crx-title-extra {
   float: right;
   margin-right: 10px;
   text-align: right;
 }
 
+@media screen and (max-width: 650px) {
+  .developer-tab {
+    float: none;
+  }
+}
+
 .verticalStackItemStyle {
   width: 50%;
   margin-left: 10px;