Reduce the flex width of PostActionButtons

Author: markharding

.gitlab/issue_templates/Bug.md

@@ -16,20 +16,20 @@ List the exact steps to trigger the bug, as a numbered list. Mention whether it
 happens every time or only sometimes.
 --->
 
-### Platform information 
+### Platform information
 
 <!---
 Tell us where you saw this: web or native app, browser and version, device and OS,
 app version, and screen size if it looks layout-related.
 --->
 
-### What is the current *bug* behavior?
+### What is the current _bug_ behavior?
 
 <!---
 Describe what actually happens.
 --->
 
-### What is the expected *correct* behavior?
+### What is the expected _correct_ behavior?
 
 <!---
 Describe what you expected to happen instead.

.gitlab/issue_templates/Default.md

@@ -4,14 +4,12 @@
 State what we want to achieve and why it matters.
 --->
 
-
 ## What needs to be done
 
 <!---
 Outline the work required to reach the goal above. Break it into tasks if it helps.
 --->
 
-
 ## Acceptance Criteria
 
 <!---
@@ -21,9 +19,7 @@ concrete enough that anyone can verify them.
 
 - [ ] ...
 
-
 ## Definition of Ready Checklist
 
 - [ ] Acceptance criteria
 - [ ] Weighted
-

apps/polycentric/src/features/post/toolbar/PostActionButton.tsx

@@ -25,59 +25,56 @@ export default function PostActionButton({
   const { theme } = useTheme();
 
   return (
-    <Pressable
-      {...props}
-      style={[
-        Atoms.flex_1,
-        Atoms.flex_row,
-        Atoms.outline_none,
-        Atoms.items_center,
-      ]}
-      hitSlop={8}
-    >
-      {({ pressed, hovered }) => {
-        const highlighted = hovered || pressed;
-        return (
-          <>
-            <View
-              style={[
-                Atoms.p_xs,
-                Atoms.rounded_full,
-                // overflow:hidden forces a rounded clip on native - without it a
-                // background applied on press (rather than at mount, like the
-                // active state) renders with square corners.
-                Atoms.overflow_hidden,
-                {
-                  backgroundColor: highlighted
-                    ? withHexOpacity(theme.palette[color], '14')
-                    : active
-                      ? withHexOpacity(theme.palette[color], '28')
-                      : 'transparent',
-                },
-              ]}
-            >
-              <Ionicons
-                name={icon}
-                size={16}
-                color={
-                  active || highlighted
-                    ? theme.palette[color]
-                    : theme.palette.neutral_500
-                }
-              />
-            </View>
-            {count !== undefined ? (
-              <Text
-                variant="small"
-                color="neutral_500"
-                style={{ minWidth: 28, lineHeight: 16 }}
+    <View style={[Atoms.flex_1, Atoms.flex_row, Atoms.justify_start]}>
+      <Pressable
+        {...props}
+        style={[Atoms.flex_row, Atoms.outline_none, Atoms.items_center]}
+        hitSlop={8}
+      >
+        {({ pressed, hovered }) => {
+          const highlighted = hovered || pressed;
+          return (
+            <>
+              <View
+                style={[
+                  Atoms.p_xs,
+                  Atoms.rounded_full,
+                  // overflow:hidden forces a rounded clip on native - without it a
+                  // background applied on press (rather than at mount, like the
+                  // active state) renders with square corners.
+                  Atoms.overflow_hidden,
+                  {
+                    backgroundColor: highlighted
+                      ? withHexOpacity(theme.palette[color], '14')
+                      : active
+                        ? withHexOpacity(theme.palette[color], '28')
+                        : 'transparent',
+                  },
+                ]}
               >
-                {count ? String(count) : ' '}
-              </Text>
-            ) : null}
-          </>
-        );
-      }}
-    </Pressable>
+                <Ionicons
+                  name={icon}
+                  size={16}
+                  color={
+                    active || highlighted
+                      ? theme.palette[color]
+                      : theme.palette.neutral_500
+                  }
+                />
+              </View>
+              {count !== undefined ? (
+                <Text
+                  variant="small"
+                  color="neutral_500"
+                  style={{ minWidth: 28, lineHeight: 16 }}
+                >
+                  {count ? String(count) : ' '}
+                </Text>
+              ) : null}
+            </>
+          );
+        }}
+      </Pressable>
+    </View>
   );
 }