Adjust the layout of the toolbar on the Issues/Projects page (#33667) (#34047)

And fix layout for mobile

Backport #33667 

Fix #33880

---------

Co-authored-by: Kerwin Bryant <kerwin612@qq.com>

web_src/css/base.css

@@ -1384,6 +1384,11 @@ table th[data-sortt-desc] .svg {
   min-width: 0;
 }
 
+.flex-text-block > .ui.button,
+.flex-text-inline > .ui.button {
+  margin: 0; /* fomantic buttons have default margin, when we use them in a flex container with gap, we do not need these margins */
+}
+
 /* to override Fomantic's default display: block for ".menu .item", and use a slightly larger gap for menu item content
 the "!important" is necessary to override Fomantic UI menu item styles, meanwhile we should keep the "hidden" items still hidden */
 .ui.dropdown .menu.flex-items-menu > .item:not(.hidden, .filtered, .tw-hidden) {

web_src/css/features/projects.css

@@ -8,18 +8,6 @@
   margin: 0 0.5em;
 }
 
-.project-toolbar-right .filter.menu {
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-
-@media (max-width: 767.98px) {
-  .project-toolbar-right .dropdown .menu {
-    left: auto !important;
-    right: auto !important;
-  }
-}
-
 .project-column {
   background-color: var(--color-project-column-bg) !important;
   border: 1px solid var(--color-secondary) !important;