Nc fix(nc-gui): Reduce gap between icons in rating field to fit 10 icons in default width of column (#7986)

* fix(nc-gui): reduce rating field gap between icons to fit 10 icons in column default width

* fix(nc-gui): keep rating field cell content left align

packages/nc-gui/components/cell/Rating.vue

@@ -77,7 +77,7 @@ watch(rateDomRef, () => {
     :disabled="readOnly"
     :count="ratingMeta.max"
     :class="readOnly ? 'pointer-events-none' : ''"
-    :style="`color: ${ratingMeta.color}; padding: ${isExpandedFormOpen ? '0px 8px' : '0px 5px'};`"
+    :style="`color: ${ratingMeta.color}; padding: ${isExpandedFormOpen ? '0px 8px' : '0px 2px'};`"
     :key="ratingMeta.icon.full"
     @keydown="onKeyPress"
   >
@@ -90,3 +90,9 @@ watch(rateDomRef, () => {
     </template>
   </a-rate>
 </template>
+
+<style scoped lang="scss">
+:deep(li:not(:last-child)) {
+  @apply mr-[1.5px];
+}
+</style>

packages/nc-gui/components/smartsheet/Cell.vue

@@ -195,7 +195,7 @@ onUnmounted(() => {
       `nc-cell-${(column?.uidt || 'default').toLowerCase()}`,
       {
         'text-brand-500': isPrimary(column) && !props.virtual && !isForm && !isCalendar,
-        'nc-grid-numeric-cell-right': isGrid && isNumericField && !isEditColumnMenu && !isForm && !isExpandedFormOpen,
+        'nc-grid-numeric-cell-right': isGrid && isNumericField && !isEditColumnMenu && !isForm && !isExpandedFormOpen && !isRating(column),
         'h-10': !isEditColumnMenu && isForm && !isAttachment(column) && !isTextArea(column) && !isJSON(column) && !props.virtual,
         'nc-grid-numeric-cell-left': (isForm && isNumericField && isExpandedFormOpen) || isEditColumnMenu,
         '!min-h-30': isTextArea(column) && (isForm || isSurveyForm),

packages/nc-gui/components/smartsheet/column/RatingOptions.vue

@@ -78,7 +78,7 @@ watch(
               <div class="flex-1">
                 <component
                   :is="getMdiIcon(icon.full)"
-                  class="mx-1"
+                  class="mr-[2px]"
                   :style="{
                     color: vModel.meta.color,
                   }"