fix: in hello component, profile grid is vertical, should be horizontal

Author: starpit

plugins/plugin-codeflare/src/controller/profile/get.tsx

@@ -25,10 +25,10 @@ export default async function getProfiles(args: Arguments) {
 
   return {
     react: (
-      <Grid hasGutter className="codeflare--grid">
+      <Grid hasGutter className="codeflare--plain-grid" span={3}>
         {profiles.map((_) => (
           <GridItem key={_.profile.name}>
-            <Tile isSelected className="codeflare--tile" title={_.profile.name} />
+            <Tile className="codeflare--tile" title={_.profile.name} />
           </GridItem>
         ))}
       </Grid>

plugins/plugin-codeflare/web/scss/components/Hello/_index.scss

@@ -31,12 +31,18 @@
 $gap: 3px;
 $cell: 1.5em;
 
-@mixin Grid {
+@mixin MicroGrid {
   .pf-l-grid.codeflare--grid {
     @content;
   }
 }
 
+@mixin Grid {
+  .codeflare--plain-grid {
+    @content;
+  }
+}
+
 @mixin Tile {
   .codeflare--tile {
     @content;
@@ -53,6 +59,12 @@ $cell: 1.5em;
   font-family: var(--font-sans-serif);
   padding: 1em;
   flex: 1;
+}
+
+@include MicroGrid {
+  font-family: var(--font-sans-serif);
+  padding: 1em;
+  flex: 1;
   grid-auto-rows: max-content;
   grid-template-columns: repeat(auto-fit, $cell);
 }