statystyki ruchu online

src/styles/JournalSection.scss

@@ -12,6 +12,7 @@
 .journal_wrapper {
   max-width: 1350px;
   width: 100%;
+  position: relative;
 
   margin: 0 auto;
 

src/styles/dropdown.scss

@@ -0,0 +1,46 @@
+@import 'responsive.scss';
+@import 'variables.scss';
+
+.dropdown-anim {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition: all 150ms ease;
+  }
+}
+
+.dropdown_background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+
+  z-index: 10;
+}
+
+.dropdown_wrapper {
+  position: absolute;
+  left: 0;
+
+  background-color: $bgCol;
+  box-shadow: 0 5px 10px 2px #0f0f0f;
+
+  width: 100%;
+  max-width: 550px;
+
+  padding: 1em;
+  z-index: 100;
+}
+
+@include smallScreen {
+  .dropdown_wrapper {
+    font-size: 1.1em;
+    max-width: 100%;
+  }
+}

src/styles/dropdown_filters.scss

@@ -1,15 +1,11 @@
+@import 'search_box.scss';
 @import 'responsive.scss';
 @import 'variables.scss';
-@import 'search_box.scss';
-
-.filters-options {
-  margin-bottom: 0.5em;
-  position: relative;
-}
 
 .actions-bar {
   display: flex;
   gap: 0.5em;
+  margin-bottom: 0.5em;
 }
 
 h1.option-title {
@@ -29,42 +25,6 @@ h1.option-title {
   }
 }
 
-.options-anim {
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-
-  &-enter-active,
-  &-leave-active {
-    transition: all 150ms ease;
-  }
-}
-
-.bg {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-
-  z-index: 10;
-}
-
-.options_wrapper {
-  position: absolute;
-
-  background-color: $bgCol;
-  box-shadow: 0 5px 10px 2px #0f0f0f;
-
-  width: 100%;
-  max-width: 550px;
-
-  padding: 1em;
-  z-index: 100;
-}
-
 .options_sorters {
   display: flex;
   align-items: center;
@@ -146,11 +106,6 @@ h1.option-title {
     }
   }
 
-  .options_wrapper {
-    font-size: 1.1em;
-    max-width: 100%;
-  }
-
   .options_filters,
   .options_sorters {
     justify-content: center;